import { type RecipeSmall } from "../types/Recipe"
import { Link } from 'react-router-dom';
import StarRating from '../components/StarRating.tsx'
import TimeDisplay from "../components/TimeDisplay.tsx"

function CookbookRecipeTile({ recipe }: { recipe: RecipeSmall }) {

  return (
    <div className="recipe-card m-2 bg-amber-200 p-4 rounded shadow">
      <div className="flex justify-between items-center recipe-name">
        <h3 className="font-bold text-xl"><Link to={`/recipe/${recipe.id}`} className="text-blue-500">{recipe.name}</Link></h3>
        <div className="ar-button bg-amber-600 text-white py-0 px-2 rounded m-2">
          {recipe.cuisine}
        </div>
      </div>
      <div className="flex justify-between items-center">
        ⏰ <TimeDisplay minutes={recipe.prep_minutes + recipe.cook_minutes} />
        <StarRating rating={recipe.stars} onRatingChange={() => { }} />
      </div>
    </div>
  );
};

export default CookbookRecipeTile;