import ReactHotToast, { Toast } from "react-hot-toast"
import clsxm from "./clsxm"
import { ReactNode } from "react"
import { XIcon } from "lucide-react"

type Options = Partial<Pick<Toast, "style" | "className" | "id" | "icon" | "duration" | "ariaProps" | "position" | "iconTheme">> | undefined

const toast = (children: ReactNode, options: Options = undefined) => {
  return ReactHotToast.custom((t) => (
    <div className={clsxm("bg-neutral-100 border border-neutral-200 text-neutral-800 text-sm rounded-lg flex", {
      "animate-appearance-in": t.visible,
      "animate-appearance-out": !t.visible
    })}>
      <span className="py-2 px-3">{children}</span>
      <div className="w-[1px] h-full bg-neutral-300" />
      <button type="button" className="px-2 text-neutral-800" onClick={() => ReactHotToast.dismiss(t.id)}>
        <XIcon size={18} />
      </button>
    </div>
  ), options)
}

export default toast