import clsx from "clsx";
import { Copy } from "lucide-react";
import { motion } from "motion/react";
import PropTypes from "prop-types";

function Notification({ message, type }) {
  return (
    <motion.div
      initial={{ y: 15, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      exit={{ y: 15, opacity: 0 }}
      className={clsx(
        "p-2 pl-8 mb-8 font-body text-lg border-2 rounded-3xl flex items-center gap-2",
        type === "error"
          ? "bg-error-surface text-white border-error"
          : type === "success"
          ? "bg-success text-white border-green-700"
          : type === "warning"
          ? "bg-warning-surface text-white border-warning"
          : ""
      )}
    >
      {message.split(":").map((msg, index) => {
        return index === 1 ? (
          <span key={index} className="border-b border-dashed">
            {msg}
          </span>
        ) : (
          <span key={index}>{msg}</span>
        );
      })}
      {message.split(":")[1] && (
        <Copy
          cursor={"pointer"}
          size={15}
          onClick={navigator.clipboard.writeText(message.split(":")[1].trim())}
        />
      )}
    </motion.div>
  );
}

Notification.propTypes = {
  message: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
};

export default Notification;