import { Link } from 'react-router'
import { Clock } from 'lucide-react'
import type { Recipe } from '../../api/types'

const gradients = [
  'from-primary/60 to-secondary/60',
  'from-secondary/60 to-sage/60',
]

export function RecipeCardSmall({ recipe }: { recipe: Recipe }) {
  const gradient = gradients[recipe.title.length % gradients.length]
  const totalTime = recipe.total_time_min || ((recipe.prep_time_min || 0) + (recipe.cook_time_min || 0))

  return (
    <Link to={`/recipe/${recipe.slug}`} className="flex bg-surface rounded-2xl overflow-hidden shadow-sm">
      {recipe.image_url ? (
        <img src={recipe.image_url} alt={recipe.title} className="w-24 h-24 object-cover flex-shrink-0" />
      ) : (
        <div className={`w-24 h-24 flex-shrink-0 bg-gradient-to-br ${gradient} flex items-center justify-center`}>
          <span className="text-2xl">🍰</span>
        </div>
      )}
      <div className="p-3 flex flex-col justify-center min-w-0">
        <h3 className="font-display text-sm text-espresso line-clamp-2">{recipe.title}</h3>
        <div className="flex items-center gap-2 mt-1 text-warm-grey text-xs">
          {totalTime > 0 && (
            <span className="flex items-center gap-1"><Clock size={12} /> {totalTime} min</span>
          )}
          {recipe.difficulty && <span className="capitalize">⭐ {recipe.difficulty}</span>}
        </div>
      </div>
    </Link>
  )
}
