'use client'

import { AlertCircle, CheckCircle2, X } from 'lucide-react'

export type DashboardToastMessage = {
  message: string
  kind?: 'error' | 'success'
}

export function DashboardToast({ toast, onClose }: { toast: DashboardToastMessage | null; onClose: () => void }) {
  if (!toast) return null
  const error = toast.kind !== 'success'
  return <div className={'fixed right-4 top-4 z-[100] flex w-[min(92vw,440px)] items-start gap-3 rounded-2xl border p-4 shadow-2xl ' + (error ? 'border-red-200 bg-red-50 text-red-900' : 'border-emerald-200 bg-emerald-50 text-emerald-900')} role="alert" aria-live="assertive">
    {error ? <AlertCircle className="mt-0.5 shrink-0 text-red-600" size={20} /> : <CheckCircle2 className="mt-0.5 shrink-0 text-emerald-600" size={20} />}
    <p className="flex-1 text-sm font-semibold leading-6">{toast.message}</p>
    <button type="button" onClick={onClose} className="rounded-lg p-1 opacity-70 transition hover:bg-black/10 hover:opacity-100" aria-label="Close notification"><X size={17} /></button>
  </div>
}