import { Spacing, SPACING_SCALE } from './Spacing';

const sizeOptions = SPACING_SCALE.map((token) => token.key);

export default {
  title: 'Atoms/Spacing',
  component: Spacing,
  tags: ['autodocs'],
  argTypes: {
    size: {
      control: 'select',
      options: sizeOptions,
      description: 'Token de espacio (px base transformado a rem)',
    },
    axis: {
      control: 'inline-radio',
      options: ['vertical', 'horizontal', 'square'],
    },
    thickness: {
      control: 'text',
      description: 'Grosor usado cuando axis es vertical u horizontal',
    },
  },
};

export const Playground = {
  args: {
    size: '32',
    axis: 'square',
    className: 'bg-emerald-500 rounded',
  },
};

export const EscalaCompleta = () => (
  <div className="space-y-4">
    {SPACING_SCALE.map((token) => (
      <div
        key={token.key}
        className="flex items-center gap-6 border border-gray-100 rounded-lg p-4 shadow-sm bg-white"
      >
        <div className={`space-token space-token-${token.key}`} />
        <div className="flex flex-col text-sm text-gray-700">
          <span className="font-semibold">{`space-${token.key}`}</span>
          <span>{token.px} / {token.rem}</span>
        </div>
      </div>
    ))}
  </div>
);

export const UsosComunes = () => (
  <div className="space-y-6">
    <div>
      <p className="text-body-md font-medium text-gray-700 mb-2">
        Separadores verticales
      </p>
      <div className="flex flex-col border rounded-lg p-4 gap-0 bg-white">
        <div className="py-2 text-gray-600">Bloque A</div>
        <Spacing size="24" axis="vertical" className="bg-transparent" />
        <div className="py-2 text-gray-600">Bloque B</div>
      </div>
    </div>

    <div>
      <p className="text-body-md font-medium text-gray-700 mb-2">
        Separadores horizontales
      </p>
      <div className="flex items-center border rounded-lg p-4 bg-white">
        <div className="text-gray-600">Etiqueta</div>
        <Spacing size="16" axis="horizontal" thickness="1px" className="bg-transparent" />
        <button className="px-3 py-1 text-sm rounded-md bg-emerald-50 text-emerald-700">
          Acción
        </button>
      </div>
    </div>
  </div>
);

