import React from 'react';
import styles from './Palette.module.css';
import type { ComponentType } from '../../../types/project';

// ── Palette item definitions ──────────────────────────────────────────────────

type PaletteItem = {
  type: ComponentType;
  label: string;
  description: string;
};

const PALETTE_ITEMS: PaletteItem[] = [
  { type: 'Label',      label: 'Label',      description: 'Static text'      },
  { type: 'Button',     label: 'Button',     description: 'Clickable action' },
  { type: 'TextInput',  label: 'Text Input', description: 'Single-line input' },
  { type: 'JsonViewer', label: 'JSON Viewer', description: 'Formatted JSON'  },
  { type: 'TextArea',   label: 'Text Area',   description: 'Multi-line input' },
  { type: 'Checkbox',   label: 'Checkbox',    description: 'Boolean input' },
  { type: 'RadioGroup', label: 'Radio Group', description: 'Single choice' },
  { type: 'Dropdown',   label: 'Dropdown',   description: 'Option selector'  },
  { type: 'Table',      label: 'Table',      description: 'Data table'        },
  { type: 'StatusPanel',label: 'Status Panel',description: 'Status message' },
  { type: 'Container',  label: 'Card',        description: 'Content container' },
];

// ── Props ─────────────────────────────────────────────────────────────────────

type PaletteProps = {
  onAdd: (type: ComponentType) => void;
};

// ── Component ─────────────────────────────────────────────────────────────────

function Palette({ onAdd }: PaletteProps): React.ReactElement {
  return (
    <aside className={styles.palette}>
      <div className={styles.header}>Components</div>
      <ul className={styles.list}>
        {PALETTE_ITEMS.map((item) => (
          <li key={item.type}>
            <button
              className={styles.item}
              onClick={() => onAdd(item.type)}
              title={`Add ${item.label} to canvas`}
            >
              <span className={styles.itemLabel}>{item.label}</span>
              <span className={styles.itemDesc}>{item.description}</span>
            </button>
          </li>
        ))}
      </ul>
      <div className={styles.hint}>Click a component to add it to the canvas</div>
    </aside>
  );
}

export default Palette;