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

const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
  "--unstable_DataGrid-radius": 0,
  // "& .MuiDataGrid-columnHeader": {
  //   height: "unset !important"
  // },
  "& .MuiDataGrid-columnHeaders": {
    backgroundColor: theme.palette.grey[50],
  },
  "& .MuiDataGrid-columnHeaderTitle": {
    borderBottom: "none",
    color: theme.palette.grey[700],
    fontSize: 16, 
    fontWeight: 600,
    lineHeight: 2,
    letterSpacing: 0.5,
    textTransform: "uppercase",
    whiteSpace: "normal",

  },
  "& .MuiDataGrid-columnSeparator": {
    color: theme.palette.primary.main,
  },
  // "& .MuiDataGrid-row:nth-of-type(even)": {
  //   backgroundColor: theme.palette.grey[200], // Light grey for even rows
  // },
  '& .MuiDataGrid-cell': {
    borderBottomColor: theme.palette.divider,
    padding: '1px 6px',
  },
}));

export default StyledDataGrid;
