import { useTranslation } from 'react-i18next';
import { LayoutList, Table2 } from 'lucide-react';
import type { ExploreViewMode } from '@/lib/exploreView';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';

interface ExploreViewToggleProps {
    value: ExploreViewMode;
    onChange: (mode: ExploreViewMode) => void;
    className?: string;
}

export function ExploreViewToggle({ value, onChange, className }: ExploreViewToggleProps) {
    const { t } = useTranslation();
    return (
        <div
            className={cn('inline-flex rounded-md border bg-background p-0.5', className)}
            role="group"
            aria-label={t('explore.viewAria')}
        >
            <Button
                type="button"
                data-testid="view-table"
                variant={value === 'table' ? 'secondary' : 'ghost'}
                size="sm"
                className="h-8 gap-1.5 px-2.5"
                onClick={() => onChange('table')}
                aria-pressed={value === 'table'}
            >
                <Table2 className="h-3.5 w-3.5" />
                <span className="hidden sm:inline">{t('explore.table')}</span>
            </Button>
            <Button
                type="button"
                data-testid="view-rows"
                variant={value === 'rows' ? 'secondary' : 'ghost'}
                size="sm"
                className="h-8 gap-1.5 px-2.5"
                onClick={() => onChange('rows')}
                aria-pressed={value === 'rows'}
            >
                <LayoutList className="h-3.5 w-3.5" />
                <span className="hidden sm:inline">{t('explore.rows')}</span>
            </Button>
        </div>
    );
}