import React from "react";

export function Alert({ variant = "default", className = "", children, ...props }) {
  const cls = ["o-alert", variant !== "default" ? "o-alert--" + variant : "", className].filter(Boolean).join(" ");
  return <div role="alert" className={cls} data-slot="alert" {...props}>{children}</div>;
}
export function AlertTitle({ className = "", children, ...props }) {
  return <div className={["o-alert__title", className].filter(Boolean).join(" ")} data-slot="alert-title" {...props}>{children}</div>;
}
export function AlertDescription({ className = "", children, ...props }) {
  return <div className={["o-alert__description", className].filter(Boolean).join(" ")} data-slot="alert-description" {...props}>{children}</div>;
}
export function AlertAction({ className = "", children, ...props }) {
  return <div className={["o-alert__action", className].filter(Boolean).join(" ")} data-slot="alert-action" {...props}>{children}</div>;
}
