"use client";

import {
  Divider,
  Menu,
  MenuItem,
} from "@mui/material";

type PageMenuProps = {
  anchorEl: HTMLElement | null;
  appFontFamily: string;
  labels: {
    viewDetail: string;
    addNewLabel: string;
    createSubPage: string;
    edit: string;
    deletePage: string;
  };
  onClose: () => void;
  onViewDetail: () => void;
  onAddNewLabel: () => void;
  onCreateSubPage: () => void;
  onEdit: () => void;
  onDeletePage: () => void;
};

export function TranslationManagementPageMenu({
  anchorEl,
  appFontFamily,
  labels,
  onClose,
  onViewDetail,
  onAddNewLabel,
  onCreateSubPage,
  onEdit,
  onDeletePage,
}: PageMenuProps) {
  return (
    <Menu
      anchorEl={anchorEl}
      open={Boolean(anchorEl)}
      onClose={onClose}
      anchorOrigin={{
        vertical: "bottom",
        horizontal: "right",
      }}
      transformOrigin={{
        vertical: "top",
        horizontal: "right",
      }}
      slotProps={{
        paper: {
          sx: {
            minWidth: 190,
            mt: 0.5,
            borderRadius: 2,
            fontFamily:
              appFontFamily,
          },
        },
      }}
    >
      <MenuItem onClick={onViewDetail}>
        {labels.viewDetail}
      </MenuItem>

      <MenuItem onClick={onAddNewLabel}>
        {labels.addNewLabel}
      </MenuItem>

      <MenuItem onClick={onCreateSubPage}>
        {labels.createSubPage}
      </MenuItem>

      <Divider />

      <MenuItem onClick={onEdit}>
        {labels.edit}
      </MenuItem>

      <Divider />

      <MenuItem
        onClick={onDeletePage}
        sx={{ color: "error.main" }}
      >
        {labels.deletePage}
      </MenuItem>
    </Menu>
  );
}

type LabelMenuProps = {
  anchorEl: HTMLElement | null;
  editLabel: string;
  deleteLabel: string;
  onClose: () => void;
  onEdit: () => void;
  onDelete: () => void;
};

export function TranslationManagementLabelMenu({
  anchorEl,
  editLabel,
  deleteLabel,
  onClose,
  onEdit,
  onDelete,
}: LabelMenuProps) {
  return (
    <Menu
      anchorEl={anchorEl}
      open={Boolean(anchorEl)}
      onClose={onClose}
    >
      <MenuItem onClick={onEdit}>
        {editLabel}
      </MenuItem>
      <Divider />
      <MenuItem
        onClick={onDelete}
        sx={{ color: "error.main" }}
      >
        {deleteLabel}
      </MenuItem>
    </Menu>
  );
}