import { CardGrande } from './CardGrande';
import { Typography } from '../../Atoms/Typography/Typography';

export default {
  title: 'Layout/CardGrande',
  component: CardGrande,
  tags: ['autodocs'],
};

export const Default = {
  args: {
    children: (
      <div style={{ width: '100%', padding: 24 }}>
        <Typography
          variant="h5"
          style={{
            fontFamily: 'IBM Plex Sans, sans-serif',
            fontWeight: 600,
            fontSize: 18,
            lineHeight: '30px',
            color: 'var(--color-cyan-19)',
          }}
        >
          CardGrande
        </Typography>
      </div>
    ),
  },
};

export const ConContainerStyle = {
  args: {
    className: 'p-0',
    style: { minHeight: 120 },
    children: (
      <div style={{ width: '100%', padding: 24, display: 'flex', flexDirection: 'column', gap: 8 }}>
        <Typography
          variant="body-md"
          style={{
            color: 'var(--color-cyan-19)',
            fontFamily: 'IBM Plex Sans, sans-serif',
            fontWeight: 500,
            fontSize: 14,
            lineHeight: '20px',
          }}
        >
          Fondo/borde/radius compartidos
        </Typography>
        <Typography
          variant="body-md"
          style={{
            color: 'var(--color-neutrals-white)',
            fontFamily: 'IBM Plex Sans, sans-serif',
            fontWeight: 400,
            fontSize: 12,
            lineHeight: '18px',
            backgroundColor: '#334681',
            padding: '6px 10px',
            borderRadius: 8,
            width: 'fit-content',
          }}
        >
          Ejemplo contenido
        </Typography>
      </div>
    ),
  },
};

