import Icon from "./Icon";

type ToastState = {
  tone: "success" | "error" | "info";
  message: string;
};

type ToastProps = {
  toast: ToastState | null;
};

export function Toast({ toast }: ToastProps) {
  if (!toast) return null;

  return (
    <div className={`toast toast--${toast.tone}`} role="status">
      <span>
        <Icon name={toast.tone === "success" ? "check" : "info"} size={17} />
      </span>
      {toast.message}
    </div>
  );
}