'use client';

import { useState } from 'react';

import CloseIcon from '@/icons/generated/CloseIcon';

interface NotificationBannerProps {
  label: string;
  header: string;
  subheader: string;
  defaultOpen?: boolean;
  onDismiss?: () => void;
}

const NotificationBanner: React.FC<NotificationBannerProps> = ({
  label,
  header,
  subheader,
  defaultOpen = true,
  onDismiss,
}) => {
  const [isOpen, setIsOpen] = useState(defaultOpen);

  if (!isOpen) {
    return null;
  }

  const handleClose = () => {
    setIsOpen(false);
    onDismiss?.();
  };

  return (
    <div className='w-full p-[16px] text-white'>
      <div className='rounded-[16px] bg-background-secondary p-[20px]'>
        <div className='flex items-center justify-between'>
          <span className='rounded-[40px] bg-accent-pink px-[8px] py-[4px] text-[12px] font-medium text-white not-italic'>
            {label}
          </span>
          <CloseIcon className='cursor-pointer' onClick={handleClose} />
        </div>
        <div className='mt-[12px] mb-[4px] text-[16px] font-medium'>
          {header}
        </div>
        <div className='text-[14px] font-normal'>{subheader}</div>
      </div>
    </div>
  );
};

export default NotificationBanner;