//@/components/alert/page.tsx

import React from 'react';

type AlertType = "success" | "warning" | "error" | "info";

interface AlertProps {
  type?: AlertType;
  alertTitle: string;
  alertDescription: string;
}

const alertStyles: Record<AlertType | "base", string> = {
  base: "p-4 rounded-md flex items-center gap-3 shadow-md",
  success: "bg-green-100 text-green-800",
  warning: "bg-yellow-100 text-yellow-800",
  error: "bg-red-100 text-red-800",
  info: "bg-blue-100 text-blue-800",
};

// Alert Body Component
const AlertBody: React.FC<AlertProps> = ({
  type = "info",
  alertTitle,
  alertDescription,
}) => {
  const alertTypeStyle = alertStyles[type];
  return (
    <div
      role="alert"
      aria-live={type === "error" ? "assertive" : "polite"}
      className={`${alertStyles.base} ${alertTypeStyle}`}
    >
      <AlertIcon type={type} />
      <div>
        <AlertTitle>{alertTitle}</AlertTitle>
        <AlertDescription>{alertDescription}</AlertDescription>
      </div>
    </div>
  );
};

// Alert Subcomponents
const AlertDescription = ({ children }: { children: React.ReactNode }) => (
  <div className="text-sm">{children}</div>
);

const AlertTitle = ({ children }: { children: React.ReactNode }) => (
  <div className="font-semibold">{children}</div>
);

const AlertIcon = ({ type }: { type: AlertType }) => {
  const icons: Record<AlertType, string> = {
    success: "✔️",
    warning: "⚠️",
    error: "❌",
    info: "ℹ️",
  };
  return <span className="mr-2 text-lg">{icons[type]}</span>;
};

export { AlertIcon, AlertTitle, AlertDescription, AlertBody };