import React, { useState } from 'react';
import { SilkeText } from '../silke-text';
import styles from './silke-theme-swatch.module.scss';

const SHADE_KEYS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const;
type ShadeKey = (typeof SHADE_KEYS)[number];

interface SilkeThemeSwatchProps {
  label: string;
  token?: string;
  shades: Record<ShadeKey, string>;
  selectedShade?: ShadeKey;
  onSelect?: (shade: ShadeKey) => void;
}

export function SilkeThemeSwatch({
  label,
  token,
  shades,
  selectedShade,
  onSelect,
}: SilkeThemeSwatchProps) {
  const [hoveredShade, setHoveredShade] = useState<ShadeKey | null>(null);

  return (
    <div className={styles.wrapper}>
      <div className={styles.label}>
        <SilkeText size="small">{label}</SilkeText>
      </div>
      <div className={styles.strip} onMouseLeave={() => setHoveredShade(null)}>
        {SHADE_KEYS.map((shade) => (
          <div
            key={shade}
            className={styles.shade}
            data-hovered={hoveredShade === shade || undefined}
            data-selected={selectedShade === shade || undefined}
            style={{ background: shades[shade] }}
            onMouseEnter={() => setHoveredShade(shade)}
            onClick={() => onSelect?.(shade)}
          >
            {hoveredShade === shade && (
              <div className={styles.tooltip}>{token ? `${token} ` : ''}{shade}</div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}