import React from 'react';
import { cn } from '@/lib/utils';
import { Sparkles, Flame, UserRound, Camera } from 'lucide-react';
import { useTranslation } from '../i18n/useTranslation';

export type GalleryFilter = 'latest' | 'popular' | 'mine' | 'photobooth';

type FilterConfig = Array<{ value: GalleryFilter; labelKey: string; icon: React.ReactNode }>;

const baseFilters: FilterConfig = [
  { value: 'latest', labelKey: 'galleryPage.filters.latest', icon: <Sparkles className="h-4 w-4" aria-hidden /> },
  { value: 'popular', labelKey: 'galleryPage.filters.popular', icon: <Flame className="h-4 w-4" aria-hidden /> },
  { value: 'mine', labelKey: 'galleryPage.filters.mine', icon: <UserRound className="h-4 w-4" aria-hidden /> },
];

export default function FiltersBar({
  value,
  onChange,
  className,
  showPhotobooth = true,
  styleOverride,
}: {
  value: GalleryFilter;
  onChange: (v: GalleryFilter) => void;
  className?: string;
  showPhotobooth?: boolean;
  styleOverride?: React.CSSProperties;
}) {
  const { t } = useTranslation();
  const filters: FilterConfig = React.useMemo(
    () => (showPhotobooth
      ? [...baseFilters, { value: 'photobooth', labelKey: 'galleryPage.filters.photobooth', icon: <Camera className="h-4 w-4" aria-hidden /> }]
      : baseFilters),
    [showPhotobooth],
  );

  return (
    <div
      className={cn(
        'flex gap-2 overflow-x-auto px-4 pb-2 text-sm font-medium [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
        className,
      )}
      style={styleOverride}
    >
      {filters.map((filter) => (
        <button
          key={filter.value}
          type="button"
          onClick={() => onChange(filter.value)}
          className={cn(
            'inline-flex items-center gap-2 rounded-full border px-4 py-2 transition',
            value === filter.value
              ? 'border-pink-500 bg-gradient-to-r from-pink-500 to-pink-600 text-white shadow'
              : 'border-transparent bg-white/70 text-muted-foreground hover:border-pink-200',
          )}
        >
          {filter.icon}
          {t(filter.labelKey)}
        </button>
      ))}
    </div>
  );
}
