import { InformationCircleIcon } from "@heroicons/react/24/outline";
import { CheckCircleIcon } from "@heroicons/react/24/outline";
import { ExclamationCircleIcon } from "@heroicons/react/24/outline";
import { XMarkIcon } from "@heroicons/react/24/outline";


export interface NotificationProps{
  type: "Info" | "Success" | "Error",
  title: string;
  show?: boolean;
  description?: string;
  onClose?: () => any;
}

export const Notification = (props: NotificationProps) => {

  const renderColor = () => {
    switch(props.type){
      case "Info":
        return "text-primary-400"
      case "Success":
        return "text-green-500"
      case "Error":
        return "text-red-500"
    }
  }

  const renderIcon = () => {
    switch(props.type){
      case "Info":
        return <InformationCircleIcon className={`h-10 w-10 ${renderColor()} max-w-[15%]`} />
      case "Success":
        return <CheckCircleIcon className={`h-10 w-10 ${renderColor()} max-w-[15%]`} />
      case "Error":
        return <ExclamationCircleIcon className={`h-10 w-10 ${renderColor()} max-w-[15%]`} />
    }
  }

  return (
    <>
      {props.show && (
        <div className="fixed right-4 top-4 w-full max-w-[300px] flex flex-wrap flex-row items-center gap-2 bg-white rounded-md p-4 shadow-lg">
          {renderIcon()}
          <div className="flex-grow max-w-[70%]">
            <h3 className={`font-bold ${renderColor()}`}>{props.title}</h3>
            <p className="text-sm">{props.description}</p>
          </div>
          <XMarkIcon className="h-6 w-6 text-black cursor-pointer max-w-[15%]" onClick={props.onClose} />
        </div>
      )}
    </>
  )
}