import React from "react";
import { Info, XCircle, CheckCircle } from "lucide-react";

type MessageType = "info" | "error" | "success";

type MessageBoxProps = {
  type?: MessageType;
  title?: string;
  children: React.ReactNode;
};

const typeStyles: Record<MessageType, { bg: string; text: string; border: string; icon: React.ReactElement }> = {
  info: {
    bg: "bg-blue-50",
    text: "text-blue-800",
    border: "border-blue-300",
    icon: <Info className="w-5 h-5 mt-1 text-blue-500" />,
  },
  error: {
    bg: "bg-red-50",
    text: "text-red-800",
    border: "border-red-300",
    icon: <XCircle className="w-5 h-5 mt-1 text-red-500" />,
  },
  success: {
    bg: "bg-green-50",
    text: "text-green-800",
    border: "border-green-300",
    icon: <CheckCircle className="w-5 h-5 mt-1 text-green-500" />,
  },
};

const MessageBox: React.FC<MessageBoxProps> = ({ type = "info", title, children }) => {
  const { bg, text, border, icon } = typeStyles[type];

  return (
    <div className={`flex items-start gap-3 ${bg} ${text} border ${border} px-4 py-3 rounded-lg`}>
      {icon}
      <div>
        {title && <p className="font-semibold">{title}</p>}
        <div className="text-sm mt-1">{children}</div>
      </div>
    </div>
  );
};

export default MessageBox;