import { Radios, RADIOS_SCALE } from './Radios';

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

export default {
  title: 'Atoms/Radios',
  component: Radios,
  tags: ['autodocs'],
  argTypes: {
    size: {
      control: 'select',
      options: sizeOptions,
      description: 'Token de radio (px base transformado a rem)',
    },
  },
};

export const Playground = {
  args: {
    size: '16',
    className: 'bg-emerald-500 w-32 h-32',
  },
};

export const EscalaCompleta = () => (
  <div className="space-y-4">
    <h3 className="text-lg font-semibold text-gray-800 mb-4">Tamaños</h3>
    {RADIOS_SCALE.map((token) => (
      <div
        key={token.key}
        className="flex items-center gap-6"
      >
        <div className={`radius-token radius-token-${token.key}`} />
        <div className="flex items-center gap-2 text-sm">
          <span className={`text-gray-800 ${token.key === '16' ? 'font-bold' : ''}`}>
            {token.px}
          </span>
          <span className={`${token.key === '16' ? 'text-emerald-600 font-bold' : 'text-emerald-600'}`}>
            {token.rem}
          </span>
        </div>
      </div>
    ))}
  </div>
);

export const EjemplosDeUso = () => (
  <div className="space-y-6">
    <div>
      <p className="text-body-md font-medium text-gray-700 mb-4">
        Botones con diferentes radios
      </p>
      <div className="flex items-center gap-4 flex-wrap">
        <button className={`px-4 py-2 bg-emerald-500 text-white radius-4 hover:bg-emerald-600 transition-colors`}>
          radius-4
        </button>
        <button className={`px-4 py-2 bg-emerald-500 text-white radius-8 hover:bg-emerald-600 transition-colors`}>
          radius-8
        </button>
        <button className={`px-4 py-2 bg-emerald-500 text-white radius-12 hover:bg-emerald-600 transition-colors`}>
          radius-12
        </button>
        <button className={`px-4 py-2 bg-emerald-500 text-white radius-16 hover:bg-emerald-600 transition-colors`}>
          radius-16 (Base)
        </button>
        <button className={`px-4 py-2 bg-emerald-500 text-white radius-24 hover:bg-emerald-600 transition-colors`}>
          radius-24
        </button>
        <button className={`px-4 py-2 bg-emerald-500 text-white radius-32 hover:bg-emerald-600 transition-colors`}>
          radius-32
        </button>
      </div>
    </div>

    <div>
      <p className="text-body-md font-medium text-gray-700 mb-4">
        Cards con diferentes radios
      </p>
      <div className="grid grid-cols-3 gap-4">
        <div className={`p-4 bg-white border border-gray-200 shadow-sm radius-4`}>
          <h3 className="font-semibold mb-2">Card radius-4</h3>
          <p className="text-sm text-gray-600">Bordes más cuadrados</p>
        </div>
        <div className={`p-4 bg-white border border-gray-200 shadow-sm radius-16`}>
          <h3 className="font-semibold mb-2">Card radius-16</h3>
          <p className="text-sm text-gray-600">Bordes estándar</p>
        </div>
        <div className={`p-4 bg-white border border-gray-200 shadow-sm radius-32`}>
          <h3 className="font-semibold mb-2">Card radius-32</h3>
          <p className="text-sm text-gray-600">Bordes muy redondeados</p>
        </div>
      </div>
    </div>

    <div>
      <p className="text-body-md font-medium text-gray-700 mb-4">
        Inputs con diferentes radios
      </p>
      <div className="flex flex-col gap-4 max-w-md">
        <input
          type="text"
          placeholder="Input con radius-4"
          className={`px-4 py-2 border border-gray-300 radius-4 focus:outline-none focus:ring-2 focus:ring-emerald-500`}
        />
        <input
          type="text"
          placeholder="Input con radius-12"
          className={`px-4 py-2 border border-gray-300 radius-12 focus:outline-none focus:ring-2 focus:ring-emerald-500`}
        />
        <input
          type="text"
          placeholder="Input con radius-16 (Base)"
          className={`px-4 py-2 border border-gray-300 radius-16 focus:outline-none focus:ring-2 focus:ring-emerald-500`}
        />
      </div>
    </div>
  </div>
);

