kit-ui/components/color/ColorInfo.tsx

'use client';

import { ColorInfo as ColorInfoType } from '@/lib/color/api/types';
import { Copy } from 'lucide-react';
import { toast } from 'sonner';
import { cn } from '@/lib/utils/cn';

interface ColorInfoProps {
  info: ColorInfoType;
  className?: string;
}

export function ColorInfo({ info, className }: ColorInfoProps) {
  const copy = (value: string, label: string) => {
    navigator.clipboard.writeText(value);
    toast.success(`Copied ${label}`);
  };

  const formatRgb = (rgb: { r: number; g: number; b: number; a?: number }) =>
    rgb.a !== undefined && rgb.a < 1
      ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`
      : `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;

  const formatHsl = (hsl: { h: number; s: number; l: number; a?: number }) =>
    hsl.a !== undefined && hsl.a < 1
      ? `hsla(${Math.round(hsl.h)}°, ${Math.round(hsl.s * 100)}%, ${Math.round(hsl.l * 100)}%, ${hsl.a})`
      : `hsl(${Math.round(hsl.h)}°, ${Math.round(hsl.s * 100)}%, ${Math.round(hsl.l * 100)}%)`;

  const formats = [
    { label: 'HEX', value: info.hex },
    { label: 'RGB', value: formatRgb(info.rgb) },
    { label: 'HSL', value: formatHsl(info.hsl) },
    { label: 'Lab', value: `lab(${info.lab.l.toFixed(1)} ${info.lab.a.toFixed(1)} ${info.lab.b.toFixed(1)})` },
    { label: 'OkLab', value: `oklab(${(info.oklab.l * 100).toFixed(1)}% ${info.oklab.a.toFixed(3)} ${info.oklab.b.toFixed(3)})` },
  ];

  return (
    <div className={cn('space-y-3', className)}>
      {/* Format rows */}
      <div className="space-y-1">
        {formats.map((fmt) => (
          <div
            key={fmt.label}
            className="group flex items-center justify-between px-2.5 py-1.5 rounded-lg border border-transparent hover:border-border/30 hover:bg-primary/5 transition-all"
          >
            <div className="flex items-baseline gap-2 min-w-0 flex-1">
              <span className="text-[10px] font-semibold text-muted-foreground/50 uppercase tracking-widest w-9 shrink-0">
                {fmt.label}
              </span>
              <span className="font-mono text-xs text-foreground/80 truncate">{fmt.value}</span>
            </div>
            <button
              onClick={() => copy(fmt.value, fmt.label)}
              aria-label={`Copy ${fmt.label}`}
              className="shrink-0 ml-2 p-1 rounded text-muted-foreground/30 hover:text-primary opacity-0 group-hover:opacity-100 transition-all"
            >
              <Copy className="w-3 h-3" />
            </button>
          </div>
        ))}
      </div>

      {/* Metadata row */}
      <div className="grid grid-cols-3 gap-2 pt-2 border-t border-border/25">
        {[
          { label: 'Brightness', value: `${(info.brightness * 100).toFixed(1)}%` },
          { label: 'Luminance', value: `${(info.luminance * 100).toFixed(1)}%` },
          {
            label: info.name && typeof info.name === 'string' ? 'Name' : 'Type',
            value: info.name && typeof info.name === 'string' ? info.name : (info.is_light ? 'Light' : 'Dark'),
          },
        ].map((m) => (
          <div key={m.label} className="px-2.5 py-2 rounded-lg bg-primary/5 border border-border/20">
            <div className="text-[10px] text-muted-foreground/40 font-mono mb-0.5">{m.label}</div>
            <div className="text-xs font-mono font-medium text-foreground/75 truncate">{m.value}</div>
          </div>
        ))}
      </div>
    </div>
  );
}