import React from 'react';

export interface HighlightCardProps {
  heading: string;
  subtext: string;
  imageUrl: string;
  imageAlt?: string;
  imageHeight?: number;
  imageWidth?: number;
}

const HighlightCard: React.FC<HighlightCardProps> = ({
  heading,
  subtext,
  imageUrl,
  imageAlt = '',
  imageHeight = 160,
  imageWidth = 160,
}) => {
  return (
    <div className='flex h-[460px] w-[376px] max-w-[90vw] min-w-[300px] shrink-0 flex-col items-start rounded-[24px] border border-white/10 bg-background-fog-thin p-8'>
      <div className='mb-4 w-full'>
        <h3 className='mb-4 font-sans text-[20px] leading-6 font-medium text-white'>
          {heading}
        </h3>
        <div className='mb-6 font-sans text-[16px] leading-6 font-medium text-white/70'>
          {subtext}
        </div>
      </div>
      <div className='m-auto flex w-full justify-center'>
        <img
          src={imageUrl}
          alt={imageAlt}
          className='rounded-[12px] object-contain'
          style={{ height: imageHeight, width: imageWidth }}
        />
      </div>
    </div>
  );
};

export default HighlightCard;