import { FC } from 'react';
import { Group, Stack } from '..';
import { twx } from '../../utils';

interface SuccessToastProps {
  onClose?: () => void;
  hideCloseButton?: boolean;
  title: string;
  icon: string;
  iconColor: string;
  message: string;
  gradient?: string[];
}

export const SuccessToast: FC<SuccessToastProps> = ({
  onClose,
  hideCloseButton = false,
  title,
  icon,
  iconColor,
  gradient,
  message,
}) => {
  return (
    <div className="p-2 py-1">
      <div className="relative rounded-2 text-black/90 dark:text-white/90">
        {
          <div
            className="absolute inset-1 bg-gradient-to-r opacity-90 blur"
            style={{
              background: gradient
                ? `linear-gradient(to right, ${gradient.join(',')})`
                : '',
            }}
          />
        }
        <Stack className="relative gap-2 border border-zinc-300 rounded-2 bg-white p-3 text-black/90">
          <Group className="w-full items-center">
            <div
              className={twx(' w-10 text-2xl text-rose ', icon)}
              style={{ color: iconColor }}
            />
            <p className="text-base leading-normal text-opacity-90">{title}</p>
            <p className="ml-auto text-xs font-normal leading-tight text-white/40">
              {message}
            </p>
            {!hideCloseButton && (
              <button
                className="ml-4 bg-transparent"
                onClick={() => onClose?.()}
              >
                <div className="i-mdi-close" />
              </button>
            )}
          </Group>
        </Stack>
      </div>
    </div>
  );
};
