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

export const CardError = ({
  title = "Notificaciones",
  errorMessage = "Error",
  className = '',
  ...props
}) => {
  return (
    <div 
      className={`bg-white w-full ${className}`} 
      style={{ 
        minHeight: '476px',
        borderRadius: '14px',
        border: '1px solid #C4C4C4',
        opacity: 1,
        display: 'flex',
        flexDirection: 'column',
        boxSizing: 'border-box',
      }}
      {...props}
    >
      <div 
        style={{
          paddingTop: '24px',
          paddingRight: '24px',
          paddingBottom: '6px',
          paddingLeft: '24px',
          opacity: 1,
          flexShrink: 0
        }}
        className="flex items-start justify-between"
      >
        <div
          style={{
            flex: 1,
            minWidth: 0,
            opacity: 1
          }}
        >
          <Typography
            variant="body-md"
            style={{
              fontFamily: FONT_FAMILY_SANS,
              fontWeight: 400,
              fontStyle: 'normal',
              fontSize: '20px',
              lineHeight: '30px',
              letterSpacing: '0%',
              verticalAlign: 'middle',
              color: 'var(--color-cyan-19)',
              margin: 0
            }}
          >
            {title}
          </Typography>
        </div>
      </div>
      <div 
        className="flex flex-col items-center flex-1"
        style={{
          paddingTop: '32px',
          paddingBottom: '24px',
          paddingLeft: '24px',
          paddingRight: '24px',
          display: 'flex',
          justifyContent: 'flex-start',
          minHeight: 0,
          gap: '16px'
        }}
      >
        <div 
          className="flex items-center justify-center border-2 rounded-full flex-shrink-0"
          style={{ 
            borderColor: '#374151',
            width: '48px',
            height: '48px',
            opacity: 1
          }}
        >
          <Icon
            name="XMarkIcon"
            variant="24-outline"
            size={32}
            className="color-gray-900"
          />
        </div>
        <div
          style={{
            width: '100%',
            maxWidth: '331.5px',
            opacity: 1,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }}
        >
          <Typography
            variant="h3"
            style={{ 
              fontFamily: FONT_FAMILY_SANS,
              fontWeight: 600,
              fontStyle: 'normal',
              fontSize: '32px',
              lineHeight: '48px',
              letterSpacing: '0px',
              textAlign: 'center',
              color: '#2D5C63'
            }}
          >
            ERROR
          </Typography>
        </div>
        <div 
          className="border flex"
          style={{
            width: '100%',
            maxWidth: '331.5px',
            minHeight: '128px',
            height: 'auto',
            borderRadius: '10px',
            borderWidth: '1px',
            borderStyle: 'solid',
            borderColor: '#EF4444',
            backgroundColor: '#FEE2E2',
            padding: '16px',
            opacity: 1,
            display: 'flex',
            justifyContent: 'space-between',
            boxSizing: 'border-box'
          }}
        >
          <div
            style={{
              width: '100%',
              opacity: 1,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center'
            }}
          >
            <Typography
              variant="mono-md"
              style={{ 
                fontFamily: FONT_FAMILY_MONO,
                fontWeight: 400,
                fontStyle: 'normal',
                fontSize: '16px',
                lineHeight: '24px',
                letterSpacing: '0px',
                textAlign: 'center',
                color: '#991B1B',
                width: '100%'
              }}
            >
              {errorMessage}
            </Typography>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CardError;

