pastel-ui/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-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-4',
        className
      )}
    >
      {colors.map((color, index) => (
        <ColorSwatch
          key={`${color}-${index}`}
          color={color}
          onClick={onColorClick ? () => onColorClick(color) : undefined}
        />
      ))}
    </div>
  );
}