"use client";

import { cn } from "@/lib/utils";
import clsx from "clsx";
import { PropsWithChildren } from "react";
import { Paper } from "@mui/material";
import { useTheme } from "@mui/material/styles";

type NoteProps = PropsWithChildren & {
  title?: string;
  type?: "note" | "danger" | "warning" | "success";
};

export default function Note({
  children,
  title = "Note",
  type = "note",
}: NoteProps) {
  const theme = useTheme();

  const noteClassNames = clsx({
    "dark:bg-stone-950/95 bg-stone-50":
      type === "note" && theme.palette.mode === "dark",
    "bg-stone-50": type === "note" && theme.palette.mode === "light",

    "dark:bg-red-950 bg-red-100 border-red-200 dark:border-red-900":
      type === "danger" && theme.palette.mode === "dark",
    "bg-red-100 border-red-200": type === "danger" && theme.palette.mode === "light",

    "dark:bg-orange-950 bg-orange-100 border-orange-200 dark:border-orange-900":
      type === "warning" && theme.palette.mode === "dark",
    "bg-orange-100 border-orange-200": type === "warning" && theme.palette.mode === "light",

    "dark:bg-green-950 bg-green-100 border-green-200 dark:border-green-900":
      type === "success" && theme.palette.mode === "dark",
    "bg-green-100 border-green-200": type === "success" && theme.palette.mode === "light",
  });

  return (
    <Paper
      elevation={1}
      className={cn(
        "border rounded-md px-5 pb-0.5 text-sm tracking-wide",
        noteClassNames
      )}
    >
      <p className="font-bold -mb-2.5">{title}:</p> {children}
    </Paper>
  );
}