import React from 'react';

function SongCard({ song }) {
  return (
    <div className="rounded-lg shadow-md p-4 bg-white dark:bg-gray-800 flex flex-col items-center text-center">
      <img
        src={song.cover || '/default-cover.jpg'}
        alt={song.title}
        className="w-24 h-24 object-cover rounded"
      />
      <h3 className="mt-2 text-sm font-semibold text-gray-800 dark:text-white">{song.title}</h3>
      <p className="text-xs text-gray-500 dark:text-gray-300">{song.artist}</p>
      <button className="mt-2 px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600">
        Play
      </button>
    </div>
  );
}

export default SongCard;