import { styled } from "@mui/material";
import { DataGrid ,DataGridProps,zhTW} from "@mui/x-data-grid";
import { forwardRef } from "react";
import { useTranslation } from "react-i18next";

const StyledDataGridBase = styled(DataGrid)(({ theme }) => ({
  "--unstable_DataGrid-radius": 0,
  "& .MuiDataGrid-columnHeaders": {
    backgroundColor: theme.palette.grey[50],
  },
  "& .MuiDataGrid-columnHeaderTitle": {
    borderBottom: "none",
    color: theme.palette.grey[700],
    fontSize: 14,
    fontWeight: 600,
    lineHeight: 2,
    letterSpacing: 0,
    textTransform: "none",
    whiteSpace: "normal",
  },
  "& .MuiDataGrid-columnSeparator": {
    color: theme.palette.divider,
  },
  "& .MuiDataGrid-cell": {
    borderBottomColor: theme.palette.divider,
    padding: "12px 16px",
    fontSize: 14,
  },
  "& .MuiDataGrid-row:hover": {
    backgroundColor: theme.palette.action.hover,
  },
}));
const StyledDataGrid = forwardRef<HTMLDivElement, DataGridProps>((props, ref) => {
  const { t } = useTranslation();
  return (
    <StyledDataGridBase
      ref={ref}
      {...props}
      localeText={{
        ...zhTW.components.MuiDataGrid.defaultProps.localeText,
        ...props.localeText, // 允许覆盖
      }}
    />
  );
});
export default StyledDataGrid;
