import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useSeason } from "@/hooks/use-season";
import { Leaf, Sun, Umbrella, Snowflake } from "lucide-react";

interface SeasonSelectorProps {
  className?: string;
}

export function SeasonSelector({ className }: SeasonSelectorProps) {
  const { season, setSeason } = useSeason();

  const getIcon = () => {
    switch (season) {
      case "spring":
        return <Leaf className="h-5 w-5" />;
      case "summer":
        return <Sun className="h-5 w-5" />;
      case "autumn":
        return <Umbrella className="h-5 w-5" />;
      case "winter":
        return <Snowflake className="h-5 w-5" />;
      default:
        return <Leaf className="h-5 w-5" />;
    }
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="ghost"
          size="icon"
          className={`p-2 rounded-full text-foreground/70 dark:text-foreground/70 hover:bg-accent/20 dark:hover:bg-accent/20 ${className}`}
        >
          {getIcon()}
          <span className="sr-only">Change season theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setSeason("spring")}>
          <Leaf className="mr-2 h-4 w-4" />
          <span>Spring</span>
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setSeason("summer")}>
          <Sun className="mr-2 h-4 w-4" />
          <span>Summer</span>
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setSeason("autumn")}>
          <Umbrella className="mr-2 h-4 w-4" />
          <span>Autumn</span>
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setSeason("winter")}>
          <Snowflake className="mr-2 h-4 w-4" />
          <span>Winter</span>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
