'use client';

import { Grid2X2, Table2 } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

import type { UploadViewMode } from '../hooks/useUploadFilters';

interface ViewSwitcherProps {
  value: UploadViewMode;
  onValueChange: (value: UploadViewMode) => void;
}

export function ViewSwitcher({ value, onValueChange }: ViewSwitcherProps) {
  const items: Array<{
    value: UploadViewMode;
    label: string;
    icon: React.ReactNode;
  }> = [
    { value: 'card', label: 'Card View', icon: <Grid2X2 className="size-4" /> },
    { value: 'table', label: 'Table View', icon: <Table2 className="size-4" /> },
  ];

  return (
    <div className="inline-flex rounded-md border bg-card p-1">
      {items.map((item) => (
        <Button
          key={item.value}
          type="button"
          variant="ghost"
          size="sm"
          onClick={() => onValueChange(item.value)}
          className={cn(
            'gap-2',
            value === item.value && 'bg-secondary text-foreground',
          )}
        >
          {item.icon}
          {item.label}
        </Button>
      ))}
    </div>
  );
}