Color Palette Generator

"use client";

import * as React from "react";
import { Copy } from "lucide-react";
import { cn } from "@/lib/utils";

export const randomHex = () =>
  "#" + Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, "0");

export const ColorPalette: React.FC<{
  count?: number;
  onChange?: (colors: string[]) => void;
  className?: string;
}> = ({ count = 5, onChange, className }) => {
  const [colors, setColors] = React.useState<string[]>(() =>
    Array.from({ length: count }, () => randomHex())
  );

  const generate = () => {
    const next = Array.from({ length: count }, () => randomHex());
    setColors(next);
    onChange?.(next);
  };

  const copyColor = async (hex: string) => {
    await navigator.clipboard.writeText(hex);
    // no toast dependency to keep it simple
  };

  const copyAll = async () => {
    await navigator.clipboard.writeText(colors.join(", "));
  };

  return (
    <div className={cn("space-y-3", className)}>
      <div className="flex gap-3">
        {colors.map((hex) => (
          <div
            key={hex}
            className="flex-1 rounded-2xl overflow-hidden shadow-sm"
          >
            <div
              title={hex}
              style={{ backgroundColor: hex }}
              className="h-16 w-full"
            />
            <div className="flex items-center justify-between gap-2 px-3 py-2 bg-card">
              <div className="font-mono text-sm">{hex}</div>
              <button
                aria-label={`Copy ${hex}`}
                onClick={(e) => {
                  e.stopPropagation();
                  copyColor(hex);
                }}
                className="rounded-md p-1 hover:bg-accent"
              >
                <Copy className="h-4 w-4" />
              </button>
            </div>
          </div>
        ))}
      </div>

      <div className="flex gap-2">
        <button
          onClick={generate}
          className="btn bg-primary text-primary-foreground rounded-2xl px-3 py-1"
        >
          Generate
        </button>
        <button
          onClick={copyAll}
          className="btn rounded-2xl px-3 py-1 border"
        >
          Copy all
        </button>
      </div>
    </div>
  );
};

export default ColorPalette;