import { Typography } from '../../Atoms/Typography/Typography';
import { useViewportMaxWidth } from '../../../hooks/useViewportMaxWidth';
import { FONT_FAMILY_SANS } from '../../../designTokens';

export const AccionesRapidas = ({
  /** Ancho en px: por debajo o igual pasa a versión mobile (data-mobile="true") */
  mobileBreakpointPx = 1024,
  className = '',
  ...props
}) => {
  const isMobile = useViewportMaxWidth(mobileBreakpointPx);

  return (
    <div
      className={`w-full bg-white ${className}`}
      data-mobile={isMobile ? 'true' : 'false'}
      style={{
        height: '363px',
        border: '1px solid #c4c4c4',
        borderRadius: '16px',
        paddingTop: '24px',
        paddingLeft: '24px',
        display: 'flex',
        flexDirection: 'column',
      }}
      {...props}
    >
      <Typography
        variant="body-lg"
        style={{
          fontFamily: FONT_FAMILY_SANS,
          fontWeight: 400,
          fontStyle: 'normal',
          fontSize: '20px',
          lineHeight: '30px',
          letterSpacing: '0%',
          verticalAlign: 'middle',
          color: 'var(--color-cyan-19)',
        }}
      >
        Acciones rápidas
      </Typography>
    </div>
  );
};

export default AccionesRapidas;
