import { useTranslation } from 'react-i18next';
import { Typography } from '../../Atoms/Typography/Typography';
import { CardGrande } from '../CardGrande/CardGrande';
import { FONT_FAMILY_SANS } from '../../../designTokens';
import { BadgeContainer } from '../../Atoms/BadgeContainer/BadgeContainer';
import { Icon } from '../../Atoms/Icon/Icon';

export const Organizacion = ({
  title,
  titleClassName = '',
  titleStyle,

  // Bloque informativo debajo del título
  showBadgeContainer = true,
  badgeContainerProps,
  badgeIconName = 'BuildingOffice2Icon',
  badgeIconVariant = '24-outline',
  badgeIconSize = 24,
  badgeIconColor = '#29474C',
  badgeIconStyle,
  infoLabel,
  infoValue = 'Nucleus Argentina S.A.',
  infoLabelClassName = '',
  infoLabelStyle,
  infoValueClassName = '',
  infoValueStyle,

  className = '',
  style,
  children,
  ...props
}) => {
  const { t } = useTranslation();
  const resolvedTitle = title ?? t('point.organizacion.title');
  const resolvedInfoLabel = infoLabel ?? t('point.organizacion.companyLabel');

  return (
    <CardGrande className={`anima-organizacion__container ${className}`.trim()} style={style} {...props}>
      <div
        className="anima-organizacion__title-container"
        style={{
          width: '100%',
          paddingTop: '24px',
          paddingRight: '24px',
          paddingBottom: '4px',
          paddingLeft: '24px',
          boxSizing: 'border-box',
          borderTopLeftRadius: '16px',
          borderTopRightRadius: '16px',
        }}
      >
        <Typography
          variant="body-md"
          className={`anima-organizacion__title ${titleClassName}`.trim()}
          style={{
            fontFamily: FONT_FAMILY_SANS || 'IBM Plex Sans, sans-serif',
            fontWeight: 400,
            // React inline styles no aceptan "Medium" para fontStyle; mantenemos normal.
            fontStyle: 'normal',
            fontSize: '20px',
            lineHeight: '30px',
            letterSpacing: '0%',
            verticalAlign: 'middle',
            margin: 0,
            leadingTrim: 'none',
            color: '#29474C',
            ...(titleStyle || {}),
          }}
        >
          {resolvedTitle}
        </Typography>
      </div>

      {showBadgeContainer ? (
        <div
          className="anima-organizacion__badge-container-row"
          style={{
            width: '100%',
            paddingTop: '16px',
            paddingRight: '24px',
            paddingBottom: '24px',
            paddingLeft: '24px',
            boxSizing: 'border-box',
            display: 'flex',
            justifyContent: 'flex-start',
            alignItems: 'center',
            gap: '16px',
          }}
        >
          <BadgeContainer {...(badgeContainerProps || {})}>
            <Icon
              name={badgeIconName}
              variant={badgeIconVariant}
              size={badgeIconSize}
              style={{
                color: badgeIconColor,
                ...(badgeIconStyle || {}),
              }}
            />
          </BadgeContainer>

          <div
            className="anima-organizacion__info-text"
            style={{
              minWidth: 0,
              display: 'flex',
              flexDirection: 'column',
              gap: '4px',
            }}
          >
            {resolvedInfoLabel ? (
              <Typography
                variant="body-sm"
                className={infoLabelClassName}
                style={{
                  fontFamily: FONT_FAMILY_SANS || 'IBM Plex Sans, sans-serif',
                  fontWeight: 400,
                  fontStyle: 'normal',
                  fontSize: '14px',
                  lineHeight: '20px',
                  letterSpacing: '0%',
                  color: 'var(--color-grey-600, #6B7280)',
                  margin: 0,
                  ...(infoLabelStyle || {}),
                }}
              >
                {resolvedInfoLabel}
              </Typography>
            ) : null}

            {infoValue ? (
              <Typography
                variant="body-md"
                className={infoValueClassName}
                style={{
                  fontFamily: FONT_FAMILY_SANS || 'IBM Plex Sans, sans-serif',
                  fontWeight: 400,
                  fontStyle: 'normal',
                  fontSize: '20px',
                  lineHeight: '30px',
                  letterSpacing: '0%',
                  color: '#29474C',
                  margin: 0,
                  ...(infoValueStyle || {}),
                }}
              >
                {infoValue}
              </Typography>
            ) : null}
          </div>
        </div>
      ) : null}

      {/* Contenido configurable por el consumidor (por ahora mínimo). */}
      {children ? <div style={{ width: '100%' }}>{children}</div> : null}
    </CardGrande>
  );
};

export default Organizacion;

