components/Toast.js

"use client";

export default function Toast({ message, type = "info" }) {
  const bgColor =
    type === "success"
      ? "rgba(74, 222, 128, 0.15)"
      : type === "error"
        ? "rgba(248, 113, 113, 0.15)"
        : "rgba(197, 160, 94, 0.15)";

  const borderColor =
    type === "success"
      ? "var(--success)"
      : type === "error"
        ? "var(--error)"
        : "var(--accent)";

  const textColor =
    type === "success"
      ? "var(--success)"
      : type === "error"
        ? "var(--error)"
        : "var(--accent)";

  return (
    <div className="fixed top-4 left-1/2 -translate-x-1/2 z-[100] toast">
      <div
        className="px-4 py-2.5 rounded-lg border text-sm shadow-lg"
        style={{
          background: bgColor,
          borderColor: borderColor,
          color: textColor,
        }}
      >
        {type === "success" && "✓ "}
        {type === "error" && "✗ "}
        {message}
      </div>
    </div>
  );
}