import {
  IconCircleCheck,
  IconFaceIdError,
  IconInfoCircle,
  IconX,
} from '@tabler/icons-solidjs'
import { Show } from 'solid-js'
import { Dynamic } from 'solid-js/web'

const STATUS = Object.freeze(
  new Proxy(
    {
      success: {
        icon: IconCircleCheck,
        color: 'text-green-500',
      },
      error: {
        icon: IconFaceIdError,
        color: 'text-red-500',
      },
      info: {
        icon: IconInfoCircle,
        color: 'text-blue-500',
      },
    },
    {
      get: (target, prop) =>
        target[prop] ?? { icon: IconInfoCircle, color: 'text-blue-500' },
    },
  ),
)

export default function Notify(props) {
  return (
    <div class="bg-white border border-slate-300 w-max h-20 shadow-lg rounded-md gap-4 p-4 flex flex-row items-center justify-center">
      <section class="w-6 h-full flex flex-col items-center justify-start">
        <Dynamic
          component={STATUS[props.status].icon}
          size={30}
          class={STATUS[props.status].color}
        />
      </section>
      <section class="h-full flex flex-col items-start justify-end gap-1">
        <Show when={props.title}>
          <h1
            class={`text-base font-semibold text-zinc-800 antialiased ${STATUS[props.status].color}`}
          >
            {props.title}
          </h1>
        </Show>
        <p class="text-sm font-medium text-black antialiased">
          {props.description}
        </p>
      </section>
      <Show when={props.onClose}>
        <section class="w-5 h-full flex flex-col items-center justify-start">
          <IconX size={20} class="cursor-pointer" onclick={props.onClose} />
        </section>
      </Show>
    </div>
  )
}