import { styled } from "@mui/material";
import { DataGrid } from "@mui/x-data-grid";

declare module "@mui/x-data-grid" {
  interface FooterPropsOverrides {
    onAdd?: () => void;
    child?: React.ReactNode;
  }
}

const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
  "--unstable_DataGrid-radius": 0,
  "& .MuiDataGrid-columnHeaders": {
    backgroundColor: theme.palette.grey[50],
  },
  "& .MuiDataGrid-columnHeaderTitle": {
    color: theme.palette.grey[700],
    fontSize: 12,
    fontWeight: 600,
    lineHeight: 2,
    letterSpacing: 0.5,
    textTransform: "uppercase",
  },
  "& .MuiDataGrid-columnSeparator": {
    color: theme.palette.primary.main,
  },
  "& .MuiOutlinedInput-root": {
    borderRadius: 0,
    maxHeight: 50,
  },
  "& .MuiAutocomplete-root .MuiFilledInput-root": {
    borderRadius: 0,
    maxHeight: 50,
  },
  "& .MuiFilledInput-root": {
    borderRadius: 0,
    maxHeight: 50,
  },
}));

export default StyledDataGrid;
