import React, { ComponentPropsWithoutRef, FC, useState } from 'react';
import { cva } from 'class-variance-authority';
import { ButtonProps } from '../../molecules/Button';
import { Icon } from '../../molecules/Icon';
import Link from '../../molecules/Link';
import { cssMerge } from '../../utils/cssMerge';

interface AnnouncementBarProps extends ComponentPropsWithoutRef<'div'> {
  text: string;
  cta: ButtonProps;
  color?: 'green' | 'purple';
}

const wrapper = cva(['tw-flex', 'tw-justify-center', 'tw-items-center', 'tw-relative', 'tw-pr-10'], {
  variants: {
    color: {
      green: ['tw-bg-gradient-two', 'tw-text-common-black'],
      purple: ['tw-bg-gradient-button', 'tw-text-common-white'],
    },
  },
  defaultVariants: {
    color: 'green',
  },
});
const content = cva([
  'tw-text-xs sm:tw-text-sm lg:tw-text-md',
  'tw-font-medium',
  'tw-font-mono',
  'tw-uppercase',
  'tw-p-4 sm:tw-py-2',
]);

export const AnnouncementBar: FC<AnnouncementBarProps> = ({ color, text, cta, ...props }) => {
  const [open, setOpen] = useState(true);

  return (
    (open && (
      <div className={cssMerge(wrapper({ color }))} {...props}>
        <span className={cssMerge(content())}>
          {text}
          {cta && (
            <Link href={cta.url || ''} className="tw-inline tw-underline hover:!tw-text-common-white">
              {cta.label}
            </Link>
          )}
        </span>
        <Icon
          onClick={() => setOpen(false)}
          role="button"
          aria-label="Close"
          id="x-close"
          stroke="currentColor"
          size={18}
          className="tw-absolute tw-right-0 tw-top-0 tw-m-2.5"
        />
      </div>
    )) ||
    null
  );
};
