"use client";

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

import { ResetIcon } from "@/components/ui/icon";

export function DashboardResetButton({ onClick }: { onClick: () => void }) {
  const theme = useTheme();

  return (
    <Button
      variant="outlined"
      onClick={onClick}
      endIcon={<ResetIcon sx={{ fontSize: 24 }} />}
      sx={{
        height: 40,
        px: 1.5,
        gap: 1.25,
        borderColor: theme.palette.primary.main,
        color: theme.palette.primary.main,
        backgroundColor: theme.palette.background.paper,
        fontSize: 13,
        fontWeight: 500,
        lineHeight: 1,
        borderRadius: "6px",
        textTransform: "none",
        boxShadow: "none",
        "& .MuiButton-endIcon": {
          marginLeft: 0,
        },
        "&:hover": {
          borderColor: theme.palette.primary.main,
          backgroundColor:
            theme.palette.mode === "dark"
              ? alpha(theme.palette.primary.main, 0.1)
              : "#eff8ff",
          boxShadow: "none",
        },
      }}
    >
      Reset
    </Button>
  );
}