Color picker

'use client';

import * as React from 'react';
import { TooltipProvider } from '../tooltip/tooltip';
import { ColorPicker } from './color-picker';

const TOOLS = [
  {
    key: 'bold',
    label: 'Bold',
    path: 'M5 3.333h5.833a3.333 3.333 0 0 1 0 6.667H5V3.333Zm0 6.667h6.667a3.333 3.333 0 0 1 0 6.667H5V10Z',
  },
  { key: 'italic', label: 'Italic', path: 'M15.833 3.333H8.333M11.667 16.667H4.167M12.5 3.333 7.5 16.667' },
] as const;

const toolClass =
  'inline-flex size-8 cursor-pointer items-center justify-center rounded-sm text-fg-quaternary outline-none transition-colors duration-sm ease-out hover:bg-primary_hover hover:text-fg-quaternary_hover focus-visible:shadow-focus-ring aria-pressed:bg-secondary_hover aria-pressed:text-fg-secondary motion-reduce:transition-none';

export default function ColorPickerDemo({ replay = 0 }: { replay?: number }) {
  const [color, setColor] = React.useState('#9333EA');
  const [open, setOpen] = React.useState(false);
  const [pressed, setPressed] = React.useState<Record<string, boolean>>({ bold: true });

  React.useEffect(() => {
    if (replay === 0) return;
    setColor('#9333EA');
    setOpen(true);
    const timers = [
      window.setTimeout(() => setColor('#2563EB'), 700),
      window.setTimeout(() => setOpen(false), 1300),
    ];
    return () => {
      for (const timer of timers) window.clearTimeout(timer);
    };
  }, [replay]);

  return (
    <TooltipProvider>
      <div className="w-full max-w-sm overflow-hidden rounded-xl border border-secondary bg-primary shadow-xs">
        <div className="flex items-center gap-1 border-b border-secondary px-2 py-1.5">
          {TOOLS.map((tool) => (
            <button
              key={tool.key}
              type="button"
              aria-label={tool.label}
              aria-pressed={Boolean(pressed[tool.key])}
              className={toolClass}
              onClick={() => setPressed((p) => ({ ...p, [tool.key]: !p[tool.key] }))}
            >
              <svg
                aria-hidden="true"
                viewBox="0 0 20 20"
                className="size-5"
                fill="none"
                stroke="currentColor"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d={tool.path} strokeWidth={1.67} vectorEffect="non-scaling-stroke" />
              </svg>
            </button>
          ))}
          <span aria-hidden="true" className="mx-1 h-5 w-px bg-(--lunia-border-secondary)" />
          <ColorPicker value={color} onValueChange={setColor} open={open} onOpenChange={setOpen} />
        </div>
        <p
          className="px-4 py-3 text-md text-primary transition-colors duration-sm ease-out motion-reduce:transition-none"
          style={{
            color,
            fontWeight: pressed.bold ? 600 : 400,
            fontStyle: pressed.italic ? 'italic' : 'normal',
          }}
        >
          Release notes for the spring update.
        </p>
      </div>
    </TooltipProvider>
  );
}