/**
 * Composant TrackGridDensitySelector
 * Sélecteur pour choisir la densité d'affichage de la grille
 */

import React from 'react';
import { LayoutGrid, Grid3x3, Grid2x2 } from 'lucide-react';
import { cn } from '@/lib/utils';

export type DensityMode = 'compact' | 'normal' | 'comfortable';

export interface TrackGridDensitySelectorProps {
  value: DensityMode;
  onChange: (mode: DensityMode) => void;
  className?: string;
}

const densityOptions: Array<{
  value: DensityMode;
  label: string;
  icon: React.ReactNode;
  description: string;
}> = [
  {
    value: 'compact',
    label: 'Compact',
    icon: <Grid3x3 className="h-4 w-4" />,
    description: 'Plus de pistes par écran',
  },
  {
    value: 'normal',
    label: 'Normal',
    icon: <Grid2x2 className="h-4 w-4" />,
    description: 'Équilibre entre densité et lisibilité',
  },
  {
    value: 'comfortable',
    label: 'Confortable',
    icon: <LayoutGrid className="h-4 w-4" />,
    description: "Plus d'espace entre les pistes",
  },
];

export function TrackGridDensitySelector({
  value,
  onChange,
  className,
}: TrackGridDensitySelectorProps) {
  return (
    <div
      className={cn(
        'inline-flex items-center gap-1 p-1 rounded-lg',
        'bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
        className,
      )}
      role="radiogroup"
      aria-label="Sélecteur de densité d'affichage"
    >
      {densityOptions.map((option) => {
        const isSelected = value === option.value;
        return (
          <button
            key={option.value}
            type="button"
            onClick={() => onChange(option.value)}
            className={cn(
              'flex items-center gap-2 px-3 py-1.5 rounded-md',
              'text-sm font-medium transition-all duration-200',
              'hover:bg-gray-200 dark:hover:bg-gray-700',
              'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
              isSelected
                ? 'bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm'
                : 'text-gray-600 dark:text-gray-400',
            )}
            aria-label={`${option.label}: ${option.description}`}
            aria-pressed={isSelected}
            role="radio"
          >
            <span className="flex-shrink-0" aria-hidden="true">
              {option.icon}
            </span>
            <span className="hidden sm:inline">{option.label}</span>
            <span className="sr-only">{option.description}</span>
          </button>
        );
      })}
    </div>
  );
}

export default TrackGridDensitySelector;
