"use client"

import { useState } from "react"
import { Search } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import type { DifficultyLevel, RecipeTag } from "@/types/recipe"

const difficultyOptions: DifficultyLevel[] = ["easy", "medium", "hard"]
const tagOptions: RecipeTag[] = [
  "vegetarian",
  "vegan",
  "gluten-free",
  "dairy-free",
  "quick meal",
  "dessert",
  "breakfast",
  "lunch",
  "dinner",
  "snack",
]

export function SearchFilters() {
  const [selectedTags, setSelectedTags] = useState<RecipeTag[]>([])

  const toggleTag = (tag: RecipeTag) => {
    if (selectedTags.includes(tag)) {
      setSelectedTags(selectedTags.filter((t) => t !== tag))
    } else {
      setSelectedTags([...selectedTags, tag])
    }
  }

  return (
    <div className="space-y-4 mb-8">
      <div className="flex flex-col md:flex-row gap-4">
        <div className="relative flex-grow">
          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input placeholder="Search recipes..." className="pl-8" />
        </div>

        <div className="flex gap-2">
          <Select>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Cooking time" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="any">Any time</SelectItem>
              <SelectItem value="under15">Under 15 mins</SelectItem>
              <SelectItem value="under30">Under 30 mins</SelectItem>
              <SelectItem value="under60">Under 1 hour</SelectItem>
              <SelectItem value="over60">Over 1 hour</SelectItem>
            </SelectContent>
          </Select>

          <Select>
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Difficulty" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="any">Any difficulty</SelectItem>
              {difficultyOptions.map((difficulty) => (
                <SelectItem key={difficulty} value={difficulty}>
                  {difficulty.charAt(0).toUpperCase() + difficulty.slice(1)}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>

          <Button variant="outline" className="hidden md:flex">
            View: Grid
          </Button>
        </div>
      </div>

      <div className="flex flex-wrap gap-2">
        {tagOptions.map((tag) => (
          <Badge
            key={tag}
            variant={selectedTags.includes(tag) ? "default" : "outline"}
            className="cursor-pointer"
            onClick={() => toggleTag(tag)}
          >
            {tag}
          </Badge>
        ))}
      </div>
    </div>
  )
}

