'use client';
import { useState } from 'react';
import { Copy, Check } from 'lucide-react';
import { StyleWorld } from './style-world';
import { styles } from '@/lib/catalog';
export function styleCSS(id: string) {
  const s = styles.find((s) => s.id === id) || styles[0];
  return `:root {\n  --surface: ${s.bg};\n  --text: ${s.fg};\n  --accent: ${s.accent};\n  --radius: ${s.radius};\n  --display-font: ${s.font === 'serif' ? 'Georgia, serif' : s.font === 'mono' ? '"IBM Plex Mono", monospace' : '"Manrope", sans-serif'};\n  --space-unit: 0.5rem;\n  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);\n}\nbody { background: var(--surface); color: var(--text); }\nh1 { font-family: var(--display-font); font-size: clamp(2.5rem, 1.5rem + 4vw, 6rem); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }\na, button { border-radius: var(--radius); }`;
}
export function StylePreview({
  id = 'swiss',
  small = false,
  editable = false,
}: {
  id?: string;
  small?: boolean;
  editable?: boolean;
}) {
  const [selected, setSelected] = useState(id),
    [copied, setCopied] = useState(false);
  const s =
    styles.find((x) => x.id === (editable ? selected : id)) || styles[0];
  return (
    <div className={`style-component ${small ? 'small' : ''}`}>
      {editable && (
        <div className="type-controls">
          <label>
            Направление
            <select
              value={selected}
              onChange={(e) => setSelected(e.target.value)}
            >
              {styles.map((s) => (
                <option value={s.id} key={s.id}>
                  {s.name}
                </option>
              ))}
            </select>
          </label>
        </div>
      )}
      <StyleWorld id={s.id} small={small} />
      {editable && (
        <div className="demo-bottom">
          <span>{s.mood}</span>
          <button
            className="subtle"
            onClick={async () => {
              try {
                await navigator.clipboard.writeText(styleCSS(s.id));
                setCopied(true);
                setTimeout(() => setCopied(false), 1800);
              } catch {
                setCopied(false);
              }
            }}
          >
            {copied ? <Check size={16} /> : <Copy size={16} />} CSS-токены
          </button>
        </div>
      )}
    </div>
  );
}