import React from "react";

export function ToastRegion({ className = "", children, ...props }) {
  return <div className={["o-toast-region", className].filter(Boolean).join(" ")} data-slot="toast-region" role="region" aria-label="Notifications" {...props}>{children}</div>;
}

export function Toast({ variant = "default", icon, title, description, action, onClose, className = "", ...props }) {
  const animate = variant === "success" ? "success" : variant === "error" ? "error" : undefined;
  const cls = ["o-toast", variant !== "default" ? "o-toast--" + variant : "", className].filter(Boolean).join(" ");
  return (
    <div className={cls} data-slot="toast" data-animate={animate} role="status" {...props}>
      {icon}
      <div className="o-toast__body">
        <div className="o-toast__title" data-slot="toast-title">{title}</div>
        {description ? <div className="o-toast__description" data-slot="toast-description">{description}</div> : null}
      </div>
      {action ? <div className="o-toast__action">{action}</div> : null}
      {onClose ? (
        <button type="button" className="o-btn o-btn--ghost o-btn--icon-xs o-toast__close" aria-label="Dismiss" onClick={onClose}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M18 6 6 18" /><path d="m6 6 12 12" /></svg>
        </button>
      ) : null}
    </div>
  );
}
