"use client"

import type React from "react"

import { Clock, Heart, Share2, X } from "lucide-react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Separator } from "@/components/ui/separator"
import type { Recipe } from "@/types/recipe"

interface RecipeModalProps {
  recipe: Recipe
  isOpen: boolean
  onClose: () => void
  isFavorite: boolean
  onToggleFavorite: (e: React.MouseEvent) => void
  onShare: (e: React.MouseEvent) => void
}

export function RecipeModal({ recipe, isOpen, onClose, isFavorite, onToggleFavorite, onShare }: RecipeModalProps) {
  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
        <DialogHeader className="flex flex-row items-start justify-between">
          <DialogTitle className="text-2xl">{recipe.title}</DialogTitle>
          <Button variant="ghost" size="icon" onClick={onClose} className="mt-0">
            <X className="h-4 w-4" />
          </Button>
        </DialogHeader>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <div className="rounded-md overflow-hidden mb-4">
              <img
                src={recipe.imageUrl || "/placeholder.svg"}
                alt={recipe.title}
                className="w-full h-64 object-cover"
              />
            </div>

            <div className="flex items-center gap-4 mb-4">
              <div className="flex items-center">
                <Clock className="h-4 w-4 mr-1.5 text-muted-foreground" />
                <span>{recipe.cookingTime} mins</span>
              </div>
              <Separator orientation="vertical" className="h-4" />
              <span className="capitalize">{recipe.difficulty}</span>
              <div className="ml-auto flex gap-2">
                <Button variant="outline" size="icon" onClick={onToggleFavorite}>
                  <Heart className={`h-4 w-4 ${isFavorite ? "fill-red-500 text-red-500" : ""}`} />
                </Button>
                <Button variant="outline" size="icon" onClick={onShare}>
                  <Share2 className="h-4 w-4" />
                </Button>
              </div>
            </div>

            <div className="flex flex-wrap gap-1.5 mb-4">
              {recipe.tags.map((tag) => (
                <Badge key={tag} variant="secondary">
                  {tag}
                </Badge>
              ))}
            </div>

            <p className="text-muted-foreground mb-6">{recipe.description}</p>
          </div>

          <div>
            <h3 className="font-medium text-lg mb-3">Ingredients</h3>
            <ul className="space-y-2 mb-6">
              {recipe.ingredients.map((ingredient, index) => (
                <li key={index} className="flex items-start">
                  <span className="inline-block h-1.5 w-1.5 rounded-full bg-primary mt-1.5 mr-2"></span>
                  {ingredient}
                </li>
              ))}
            </ul>

            <h3 className="font-medium text-lg mb-3">Instructions</h3>
            <ol className="space-y-3">
              {recipe.instructions.map((instruction, index) => (
                <li key={index} className="flex items-start">
                  <span className="inline-flex items-center justify-center h-5 w-5 rounded-full bg-primary/10 text-primary text-xs font-medium mr-2 mt-0.5">
                    {index + 1}
                  </span>
                  <span>{instruction}</span>
                </li>
              ))}
            </ol>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}

