kit/components/color/PaletteGrid.tsx

'use client';

import { ColorSwatch } from './ColorSwatch';
import { cn } from '@/lib/utils/cn';

interface PaletteGridProps {
  colors: string[];
  onColorClick?: (color: string) => void;
  className?: string;
}

export function PaletteGrid({ colors, onColorClick, className }: PaletteGridProps) {
  if (colors.length === 0) {
    return (
      <div className="text-center py-12 text-muted-foreground">
        No colors in palette yet
      </div>
    );
  }

  return (
    <div className={cn('grid grid-cols-4 sm:grid-cols-5 gap-2', className)}>
      {colors.map((color, index) => (
        <ColorSwatch
          key={`${color}-${index}`}
          color={color}
          size="sm"
          onClick={onColorClick ? () => onColorClick(color) : undefined}
        />
      ))}
    </div>
  );
}