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

export const CardVacia = ({
  title = "Notificaciones",
  className = '',
  ...props
}) => {
  const { t } = useTranslation();
  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 justify-center flex-1"
        style={{
          paddingTop: '80px',
          paddingBottom: '24px',
          paddingLeft: '24px',
          paddingRight: '24px',
          display: 'flex',
          justifyContent: 'flex-start',
          minHeight: 0
        }}
      >
        <div 
          className="mb-4 flex items-center justify-center flex-shrink-0"
          style={{ 
            width: '64px',
            height: '64px',
            borderRadius: '12px',
            paddingTop: '8px',
            paddingRight: '8px',
            paddingBottom: '8px',
            paddingLeft: '8px',
            backgroundColor: '#E6F7F0',
            opacity: 1
          }}
        >
          <Icon
            name="HandThumbDownIcon"
            variant="24-outline"
            size={32}
            className="color-gray-900"
          />
        </div>
        <Typography
          variant="h5"
          className="color-gray-900 mb-2"
          style={{
            fontFamily: FONT_FAMILY_SANS,
            fontWeight: 400,
            fontStyle: 'normal',
            fontSize: '24px',
            lineHeight: '36px',
            letterSpacing: '0px',
            textAlign: 'center'
          }}
        >
          {t('card.empty.title', { defaultValue: 'UPS...' })}
        </Typography>
        <Typography
          variant="body-lg"
          className="color-gray-700 text-center"
          style={{
            fontSize: '18px',
            lineHeight: '27px'
          }}
        >
          {t('card.empty.description', { defaultValue: 'Parece que esta tarjeta no contiene información.' })}
        </Typography>
      </div>
    </div>
  );
};

export default CardVacia;

