import { useParams, Link } from "react-router-dom"
import { recipes } from "../mock_data/recipes"

/**
 * Displays the full detail of a single recipe,
 * including its ingredients, instructions, and image.
 */
export default function RecipeDetailView() {
  // Extract recipe ID from route params
  const { id } = useParams<{ id: string }>()
  const recipe = recipes.find((r) => r.id === id)

  if (!recipe) {
    return <p className="p-6">Recipe not found.</p>
  }

  return (
    <div className="p-6 max-w-2xl mx-auto">
      <h1 className="content-title">{recipe.title}</h1>

      {/* Recipe image */}
      {recipe.imageUrl && (
        <img
          src={recipe.imageUrl}
          alt={recipe.title}
          className="w-full rounded-xl mb-4"
        />
      )}

      {/* Ingredients */}
      <h2 className="section-heading">Zutaten</h2>
      <p>For {recipe.servings.amount} {recipe.servings.unit}</p>
      <ul className="default-list-item">
        {recipe.ingredients.map((ing, i) => (
        <li key={i}>
          {ing.amount} {ing.unit ?? ""} {ing.name}
        </li>
        ))}
      </ul>

      {/* Instructions */}
      <h2 className="section-heading">Zubereitung</h2>
      <p className="mb-6">{recipe.instructions}</p>

      {/* Action buttons */}
      <div className="button-group">
        <Link
          to={`/recipe/${recipe.id}/edit`}
          className="primary-button"
        >
          Bearbeiten
        </Link>
        <Link
          to="/"
          className="default-button"
        >
          Zurueck
        </Link>
      </div>

    </div>

  )
}