import { cn } from "../../lib/cn";

export function Toast({
  description,
  title,
  tone = "info",
}: {
  description?: string;
  title: string;
  tone?: "info" | "success" | "warning" | "error";
}) {
  const toneClasses =
    tone === "success"
      ? "border-[var(--uhuru-success-border)] bg-[var(--uhuru-success-bg)] text-[var(--uhuru-success-text)]"
      : tone === "warning"
        ? "border-[var(--uhuru-warning-border)] bg-[var(--uhuru-warning-bg)] text-[var(--uhuru-warning-text)]"
        : tone === "error"
          ? "border-[var(--uhuru-error-border)] bg-[var(--uhuru-error-bg)] text-[var(--uhuru-error-text)]"
          : "border-[var(--uhuru-info-border)] bg-[var(--uhuru-info-bg)] text-[var(--uhuru-info-text)]";

  return (
    <div className={cn("inline-flex min-w-[280px] flex-col rounded-[var(--uhuru-radius-md)] border px-4 py-3 shadow-[var(--uhuru-shadow-md)]", toneClasses)}>
      <p className="m-0 text-sm font-medium">{title}</p>
      {description ? <p className="mt-1 mb-0 text-sm leading-6">{description}</p> : null}
    </div>
  );
}