"use client"

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

type Props = {
  status: 'idle' | 'success' | 'error' | 'info'
  message: string | null
}

export default function StatusMessage({ status, message }: Props) {
  if (!message) return null
  
  const config = {
    success: {
      color: 'bg-[#f0fdf4] border-[#006600] text-[#004d00]',
      icon: <CheckCircle2 className="h-5 w-5 flex-shrink-0" style={{ color: '#006600' }} />
    },
    error: {
      color: 'bg-[#fef2f2] border-[#FF0000] text-[#991b1b]',
      icon: <AlertCircle className="h-5 w-5 flex-shrink-0" style={{ color: '#FF0000' }} />
    },
    info: {
      color: 'bg-[#f3f4f6] border-[#6b7280] text-[#374151]',
      icon: <Info className="h-5 w-5 flex-shrink-0" style={{ color: '#6b7280' }} />
    },
    idle: {
      color: 'bg-[#f3f4f6] border-[#6b7280] text-[#374151]',
      icon: <Info className="h-5 w-5 flex-shrink-0" style={{ color: '#6b7280' }} />
    }
  }

  const current = config[status]

  return (
    <div
      role="status"
      aria-live="polite"
      className={`mt-4 flex items-center gap-3 rounded-lg border-l-4 px-4 py-3 text-sm font-medium ${current.color}`}
    >
      {current.icon}
      <span>{message}</span>
    </div>
  )
}