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

/**
 * Bloque reloj + “Última actualización” + detalle (misma tipografía que ConfiguracionLocalizacion / ConfiguracionMarcaTenant).
 *
 * @param {'narrow'|'wide'} variant - narrow: letterSpacing 0.01em; wide: 1% + verticalAlign (desktop).
 */
export const UltimaActualizacion = ({
  label = 'Última actualización:',
  text,
  variant = 'narrow',
  render = 'twoLines',
  labelClassName = '',
  labelStyle,
  textClassName = '',
  textStyle,
  iconName = 'ClockIcon',
  iconSize = 16,
  iconStyle,
  className = '',
  style,
  rowClassName = '',
  rowStyle,
  ...props
}) => {
  const isWide = variant === 'wide';
  const isSingleLine = render === 'singleLine';

  const labelTypographyStyle = {
    fontFamily: FONT_FAMILY_SANS,
    fontWeight: 400,
    fontStyle: 'italic',
    fontSize: '14px',
    lineHeight: '21px',
    letterSpacing: isWide ? '1%' : '0.01em',
    ...(isWide ? { verticalAlign: 'middle' } : {}),
    color: 'var(--grey-800, #303030)',
    margin: 0,
    ...(labelStyle || {}),
  };

  const textTypographyStyle = {
    fontFamily: FONT_FAMILY_SANS,
    fontWeight: 400,
    fontStyle: 'italic',
    fontSize: '14px',
    lineHeight: '21px',
    letterSpacing: isWide ? '1%' : '0.01em',
    ...(isWide ? { verticalAlign: 'middle', textAlign: 'left' } : {}),
    color: 'var(--grey-800, #303030)',
    margin: 0,
    paddingLeft: '24px',
    ...(textStyle || {}),
  };

  const singleLineTypographyStyle = {
    ...labelTypographyStyle,
    ...(textStyle || {}),
  };

  const defaultIconStyle = {
    width: '16px',
    height: '16px',
    color: '#303030',
    flexShrink: 0,
    ...(isWide ? { opacity: 1 } : {}),
    ...(iconStyle || {}),
  };

  return (
    <div
      className={`anima-ultimaactualizacion ${className}`.trim()}
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '4px',
        minWidth: 0,
        ...(style || {}),
      }}
      {...props}
    >
      <div
        className={`anima-ultimaactualizacion__row ${rowClassName}`.trim()}
        style={{
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
          gap: '8px',
          ...(isWide ? { flexShrink: 0 } : {}),
          ...(rowStyle || {}),
        }}
      >
        <Icon name={iconName} size={iconSize} style={defaultIconStyle} />
        {isSingleLine ? (
          <Typography variant="body-sm" className={labelClassName} style={singleLineTypographyStyle}>
            {text ? `${label} ${text}` : label}
          </Typography>
        ) : (
          <Typography variant="body-sm" className={labelClassName} style={labelTypographyStyle}>
            {label}
          </Typography>
        )}
      </div>
      {!isSingleLine && text ? (
        <Typography variant="body-sm" className={textClassName} style={textTypographyStyle}>
          {text}
        </Typography>
      ) : null}
    </div>
  );
};

export default UltimaActualizacion;
