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 overflow-x-auto px-1 pb-2 text-xs font-semibold [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
        className,
      )}
      style={styleOverride}
    >
      <div className="inline-flex items-center rounded-full border border-border/70 bg-white/80 p-1 shadow-sm backdrop-blur dark:border-white/10 dark:bg-slate-950/70">
        {filters.map((filter, index) => {
          const isActive = value === filter.value;
          return (
            <div key={filter.value} className="flex items-center">
              <button
                type="button"
                onClick={() => onChange(filter.value)}
                className={cn(
                  'inline-flex items-center gap-1 rounded-full px-3 py-1.5 transition',
                  isActive
                    ? 'bg-pink-500 text-white shadow'
                    : 'text-muted-foreground hover:bg-pink-50 hover:text-pink-600',
                )}
              >
                {React.cloneElement(filter.icon as React.ReactElement, { className: 'h-3.5 w-3.5' })}
                <span className="whitespace-nowrap">{t(filter.labelKey)}</span>
              </button>
              {index < filters.length - 1 && (
                <span className="mx-1 h-4 w-px bg-border/60 dark:bg-white/10" aria-hidden />
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}
