import { IconAlertCircle as AlertCircle, IconCheck as Check, IconInfoCircle as Info } from '@tabler/icons-react'
import type { Notice } from '@/shared/lib'

export function Alert({ notice }: { notice?: Notice }) {
  if (!notice) return null
  const Icon = notice.kind === 'error' ? AlertCircle : notice.kind === 'success' ? Check : Info
  return (
    <div
      role={notice.kind === 'error' ? 'alert' : 'status'}
      className={`mb-6 flex items-start gap-3 rounded-xl p-4 ${notice.kind === 'error' ? 'bg-error-bg' : notice.kind === 'success' ? 'bg-success-bg' : 'bg-elevated'}`}
    >
      <Icon
        size={20}
        className={`mt-0.5 shrink-0 ${notice.kind === 'error' ? 'text-danger' : notice.kind === 'success' ? 'text-success' : 'text-muted'}`}
      />
      <p className="text-sm leading-[1.6] wrap-anywhere">{notice.text}</p>
    </div>
  )
}