import { LogoHexa } from './LogoHexa';

export default {
  title: 'Atoms/LogoHexa',
  component: LogoHexa,
  tags: ['autodocs'],
};

export const Default = {
  render: () => (
    <LogoHexa width={36} height={40} />
  ),
};

export const TamañoGrande = {
  render: () => (
    <LogoHexa width={36} height={40} />
  ),
};

export const TamañoPequeño = {
  render: () => (
    <LogoHexa width={36} height={40} />
  ),
};

export const ConColoresPersonalizados = {
  render: () => (
    <div className="flex items-center gap-4">
      <LogoHexa width={36} height={40} backgroundColor="#2D5C63" textColor="#ffffff" />
      <LogoHexa width={36} height={40} backgroundColor="#56B676" textColor="#ffffff" />
      <LogoHexa width={36} height={40} backgroundColor="#6D3856" textColor="#ffffff" />
    </div>
  ),
};

