"use client";

import Button from "@mui/material/Button";
import {
  alpha,
  useTheme,
} from "@mui/material/styles";

import { SlidersHorizontalIcon } from "@/components/dashboard/dashboard-icons";
import { useAppLanguage } from "@/components/providers/app-language-provider";

import {
  normalizePlenaryLanguage,
  plenaryText,
} from "../plenary-i18n";

type PlenaryResetButtonProps = {
  onClick: () => void;
};

export function PlenaryResetButton({
  onClick,
}: PlenaryResetButtonProps) {
  const theme = useTheme();
  const { language } = useAppLanguage();

  const currentLanguage =
    normalizePlenaryLanguage(language);

  const text = plenaryText[currentLanguage];

  return (
    <Button
      variant="outlined"
      onClick={onClick}
      endIcon={
        <SlidersHorizontalIcon
          sx={{
            fontSize: 18,
          }}
        />
      }
      sx={{
        height: 40,
        px: 2,
        minWidth:
          currentLanguage === "kh"
            ? 130
            : 90,
        borderColor:
          theme.palette.primary.main,
        color:
          theme.palette.primary.main,
        backgroundColor:
          theme.palette.background.paper,
        fontSize: 13,
        fontWeight: 500,
        borderRadius: "10px",
        boxShadow: "none",

        "&:hover": {
          borderColor:
            theme.palette.primary.main,
          backgroundColor:
            theme.palette.mode === "dark"
              ? alpha(
                  theme.palette.primary.main,
                  0.1
                )
              : "#eff8ff",
          boxShadow: "none",
        },
      }}
    >
      {text.reset}
    </Button>
  );
}