"use client"

import { useState } from "react"
import { RecipeCard } from "@/components/recipe-card"
import { recipes } from "@/data/recipes"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { LayoutGrid, List } from 'lucide-react'
import { Heart, Share2 } from 'lucide-react'; // Import missing icons
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { SearchFilters } from "@/components/search-filters";


export default function RecipeList() {
  const [viewMode, setViewMode] = useState<"grid" | "list">("grid")

  return (
    <div>
      <SearchFilters />
      <Tabs defaultValue="grid" className="mb-6">
        <div className="flex justify-between items-center">
          <h2 className="text-xl font-semibold">
            {recipes.length} Recipes
          </h2>
          <TabsList>
            <TabsTrigger value="grid" onClick={() => setViewMode("grid")}>
              <LayoutGrid className="h-4 w-4 mr-2" />
              Grid
            </TabsTrigger>
            <TabsTrigger value="list" onClick={() => setViewMode("list")}>
              <List className="h-4 w-4 mr-2" />
              List
            </TabsTrigger>
          </TabsList>
        </div>

        <TabsContent value="grid" className="mt-6">
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {recipes.map(recipe => (
              <RecipeCard key={recipe.id} recipe={recipe} />
            ))}
          </div>
        </TabsContent>

        <TabsContent value="list" className="mt-6">
          <div className="space-y-4">
            {recipes.map(recipe => (
              <div key={recipe.id} className="border rounded-lg overflow-hidden">
                <div className="flex flex-col sm:flex-row">
                  <div className="sm:w-1/3 h-48 sm:h-auto">
                    <img
                      src={recipe.imageUrl || "/placeholder.svg"}
                      alt={recipe.title}
                      className="w-full h-full object-cover"
                    />
                  </div>
                  <div className="p-4 sm:w-2/3 flex flex-col">
                    <h3 className="font-semibold text-lg">{recipe.title}</h3>
                    <div className="flex items-center text-muted-foreground text-sm mt-1">
                      <span>{recipe.cookingTime} mins</span>
                      <span className="mx-2">•</span>
                      <span className="capitalize">{recipe.difficulty}</span>
                    </div>
                    <p className="text-muted-foreground mt-2 flex-grow">
                      {recipe.description}
                    </p>
                    <div className="flex flex-wrap gap-1.5 mt-3">
                      {recipe.tags.map(tag => (
                        <Badge key={tag} variant="secondary">
                          {tag}
                        </Badge>
                      ))}
                    </div>
                    <div className="flex justify-between items-center mt-4">
                      <Button>View Recipe</Button>
                      <div className="flex gap-2">
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={(e) => e.stopPropagation()}
                        >
                          <Heart
                            className={`h-5 w-5 ${recipe.isFavorite ? 'fill-red-500 text-red-500' : ''}`}
                          />
                        </Button>
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={(e) => e.stopPropagation()}
                        >
                          <Share2 className="h-5 w-5" />
                        </Button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}