import { Link } from 'react-router-dom';
import CategoryBadge from './CategoryBadge';

export default function RecipeCard({ recipe }) {
  return (
    <Link
      to={`/recipe/${recipe.id}`}
      className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow"
    >
      {recipe.thumbnail_url && (
        <img
          src={recipe.thumbnail_url}
          alt={recipe.name}
          className="w-full h-48 object-cover"
        />
      )}
      <div className="p-4">
        <div className="flex items-start justify-between gap-2 mb-2">
          <h3 className="font-semibold text-lg leading-tight">{recipe.name}</h3>
          <CategoryBadge category={recipe.category} />
        </div>
        {recipe.description && (
          <p className="text-gray-500 text-sm line-clamp-2 mb-2">
            {recipe.description}
          </p>
        )}
        <div className="flex items-center gap-4 text-xs text-gray-400">
          {recipe.tiktok_author && <span>@{recipe.tiktok_author}</span>}
          <span>{recipe.ingredients?.length || 0} Zutaten</span>
          <span>{recipe.steps?.length || 0} Schritte</span>
        </div>
      </div>
    </Link>
  );
}