import * as React from 'react';
import { cn } from '@/lib/utils';

/**
 * ScrollArea - Composant de zone de défilement avec design system Kodo
 *
 * Composant pour créer une zone de défilement avec une barre de défilement personnalisée.
 * Utilise le design system Kodo avec la classe `custom-scrollbar` pour le style.
 *
 * @example
 * ```tsx
 * // Zone de défilement simple
 * <ScrollArea className="h-64">
 *   <div>Contenu long qui nécessite un scroll</div>
 * </ScrollArea>
 * ```
 *
 * @component
 * @param {React.HTMLAttributes<HTMLDivElement>} props - Propriétés HTML standard de div
 * @returns {JSX.Element} Élément div avec overflow-auto et custom-scrollbar
 */
const ScrollArea = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, children, ...props }, ref) => (
  <div
    ref={ref}
    className={cn('relative overflow-auto custom-scrollbar', className)}
    {...props}
  >
    {children}
  </div>
));
ScrollArea.displayName = 'ScrollArea';

/**
 * ScrollBar - Barre de défilement personnalisée
 *
 * Composant pour une barre de défilement personnalisée (utilisé avec ScrollArea).
 *
 * @component
 */

const ScrollBar = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn('flex touch-none select-none transition-colors', className)}
    {...props}
  />
));
ScrollBar.displayName = 'ScrollBar';

export { ScrollArea, ScrollBar };