import { LayoutGrid, List, Table } from 'lucide-react'
import { cn } from '@/lib/utils'

type ViewMode = 'grid' | 'list' | 'table'

interface ViewToggleProps {
  view: ViewMode
  onChange: (view: ViewMode) => void
  className?: string
}

export function ViewToggle({ view, onChange, className }: ViewToggleProps) {
  return (
    <div className={cn('flex items-center gap-1 rounded-md border border-border p-1', className)}>
      <button
        type="button"
        onClick={() => onChange('grid')}
        className={cn(
          'rounded p-1.5 transition-colors',
          view === 'grid'
            ? 'bg-accent text-foreground border-border'
            : 'text-muted-foreground hover:bg-accent hover:text-foreground'
        )}
        title="Grid view"
        aria-label="Grid view"
      >
        <LayoutGrid className="h-4 w-4" />
      </button>
      <button
        type="button"
        onClick={() => onChange('list')}
        className={cn(
          'rounded p-1.5 transition-colors',
          view === 'list'
            ? 'bg-accent text-foreground border-border'
            : 'text-muted-foreground hover:bg-accent hover:text-foreground'
        )}
        title="List view"
        aria-label="List view"
      >
        <List className="h-4 w-4" />
      </button>
      <button
        type="button"
        onClick={() => onChange('table')}
        className={cn(
          'rounded p-1.5 transition-colors',
          view === 'table'
            ? 'bg-accent text-foreground border-border'
            : 'text-muted-foreground hover:bg-accent hover:text-foreground'
        )}
        title="Table view"
        aria-label="Table view"
      >
        <Table className="h-4 w-4" />
      </button>
    </div>
  )
}
