import React, { useEffect, useRef, useState } from 'react';
import { Box, Text } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { TextProps } from 'frisco/PredefinedProps';

type PromotionalCardProps = {
  image: string;
  color: MainColorType;
} & TextProps;

const PromotionalCard = ({ title, description, image, color }: PromotionalCardProps) => {
  const cardRef = useRef<HTMLDivElement | null>(null);
  const [maxHeight, setMaxHeight] = useState<number | 'auto'>('auto');

  useEffect(() => {
    const updateHeight = () => {
      const cards = document.querySelectorAll('.promo-card');
      const maxHeight = Math.max(
        ...Array.from(cards).map((card) => card.getBoundingClientRect().height),
      );
      setMaxHeight(maxHeight);
    };

    updateHeight();
    window.addEventListener('resize', updateHeight);
    return () => window.removeEventListener('resize', updateHeight);
  }, []);

  return (
    <Box
      ref={cardRef}
      className="promo-card"
      backgroundColor={color}
      borderRadius="medium"
      style={{ minHeight: maxHeight }}
    >
      <Box
        display="flex"
        flexDirection="column"
        justifyContent="center"
        alignItems="center"
        paddingX={5}
      >
        <Box
          position="relative"
          marginTop={5}
          maxWidth={20}
          style={{
            width: '100%',
            display: 'flex',
            justifyContent: 'center',
            position: 'relative',
          }}
        >
          <img
            src={image}
            alt="image"
            style={{
              width: '100%',
              objectFit: 'cover',
              position: 'relative',
              zIndex: 1,
            }}
          />
          <Box
            style={{
              position: 'absolute',
              bottom: '-10px',
              width: '100%',
              height: '50%',
              background: `radial-gradient(ellipse at bottom, rgba(255,255,255,0) 30%, ${color} 100%)`,
              filter: 'blur(15px)',
              zIndex: 2,
            }}
          />
        </Box>
        <Text textAlign="center" marginTop={3} variant="pLargeBold" color="black100">
          {title}
        </Text>
        <Text
          textAlign="center"
          marginTop={1}
          marginBottom={2}
          variant="pSmallRegular"
          color="black100"
          style={{
            wordWrap: 'break-word',
            whiteSpace: 'normal',
            overflowWrap: 'break-word',
            maxWidth: '100%',
          }}
        >
          {description}
        </Text>
      </Box>
    </Box>
  );
};

export default PromotionalCard;