"use client";

import { useTranslations } from "next-intl";
import { Crown } from "lucide-react";

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import {
  ASPECT_RATIO_OPTIONS,
  type AspectRatioFilter,
} from "@/lib/video-templates-catalog";
import { cn } from "@/lib/utils";

interface VideoTemplatesPremiumToggleProps {
  checked: boolean;
  onCheckedChange: (value: boolean) => void;
  className?: string;
  switchId?: string;
}

export function VideoTemplatesPremiumToggle({
  checked,
  onCheckedChange,
  className,
  switchId = "premium-only-toggle",
}: VideoTemplatesPremiumToggleProps) {
  const t = useTranslations("auto.componentsTemplatesVideoVideoTemplatesFilterControls");
  return (
    <div className={cn("flex items-center gap-2", className)}>
      <Crown className="h-4 w-4 shrink-0 text-amber-500" aria-hidden />
      <span className="text-sm font-medium text-gray-700">{t("premiumOnly")}</span>
      <Switch
        id={switchId}
        aria-label={t("premiumOnlyAriaLabel")}
        checked={checked}
        onCheckedChange={onCheckedChange}
        className="data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-gray-200"
      />
    </div>
  );
}

interface VideoTemplatesSizeSelectProps {
  value: AspectRatioFilter;
  onValueChange: (value: AspectRatioFilter) => void;
  triggerClassName?: string;
}

export function VideoTemplatesSizeSelect({
  value,
  onValueChange,
  triggerClassName,
}: VideoTemplatesSizeSelectProps) {
  const t = useTranslations("auto.componentsTemplatesVideoVideoTemplatesFilterControls");
  return (
    <Select value={value} onValueChange={(v) => onValueChange(v as AspectRatioFilter)}>
      <SelectTrigger
        className={cn("h-10 w-[140px] border-gray-200 bg-white", triggerClassName)}
        aria-label={t("sizeAriaLabel")}
      >
        <SelectValue placeholder={t("sizePlaceholder")} />
      </SelectTrigger>
      <SelectContent>
        {ASPECT_RATIO_OPTIONS.map((option) => (
          <SelectItem key={option.id} value={option.id}>
            {option.id === "all" ? t("allSizes") : option.label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}
