import { Game } from '../../types/game';

interface GameCardProps {
  game: Game;
  onEdit?: (game: Game) => void;
  onDelete?: (id: string) => void;
}

export default function GameCard({ game, onEdit, onDelete }: GameCardProps): JSX.Element {
  return (
    <div className="rounded border border-gray-300 p-4 shadow-sm hover:shadow-md">
      <h3 className="mb-2 text-lg font-semibold">{game.title}</h3>
      <p className="mb-2 text-sm text-gray-600">{game.slug}</p>
      {game.description && <p className="mb-3 text-sm text-gray-700">{game.description}</p>}
      <p className="mb-4 text-xs text-gray-500">
        Added: {new Date(game.createdAt).toLocaleDateString()}
      </p>
      <div className="flex gap-2">
        {onEdit && (
          <button
            onClick={() => onEdit(game)}
            className="rounded bg-blue-600 px-3 py-1 text-sm text-white hover:bg-blue-700"
          >
            Edit
          </button>
        )}
        {onDelete && (
          <button
            onClick={() => onDelete(game.id)}
            className="rounded bg-red-600 px-3 py-1 text-sm text-white hover:bg-red-700"
          >
            Delete
          </button>
        )}
      </div>
    </div>
  );
}