'use client';

import { Grid3x3, List } from 'lucide-react';

type ViewMode = 'table' | 'grid';

interface ViewModeToggleProps {
  value: ViewMode;
  onChange: (mode: ViewMode) => void;
}

export function ViewModeToggle({ value, onChange }: ViewModeToggleProps) {
  return (
    <div className="crm-radius-toggle inline-flex items-center gap-1.5 border border-border bg-card p-1 shrink-0">
      <button
        type="button"
        onClick={() => onChange('table')}
        aria-label="List view"
        aria-pressed={value === 'table'}
        title="List view"
        className={`crm-radius-toggle w-8 h-8 flex items-center justify-center cursor-pointer transition-colors ${
          value === 'table'
            ? 'bg-[#108E7A] text-white shadow-none'
            : 'text-foreground hover:bg-muted/50'
        }`}
      >
        <List className="w-4 h-4" strokeWidth={2.25} />
      </button>
      <button
        type="button"
        onClick={() => onChange('grid')}
        aria-label="Grid view"
        aria-pressed={value === 'grid'}
        title="Grid view"
        className={`crm-radius-toggle w-8 h-8 flex items-center justify-center cursor-pointer transition-colors ${
          value === 'grid'
            ? 'bg-[#108E7A] text-white shadow-none'
            : 'text-foreground hover:bg-muted/50'
        }`}
      >
        <Grid3x3 className="w-4 h-4" strokeWidth={2.25} />
      </button>
    </div>
  );
}