import { Tab, Tabs } from "@mui/material";
import { BREAKPOINTS } from "../../../constants/rwd";
import { useSharedState } from "../../../store/useSharedState";
import { capitalizeFirstLetter } from "../../../utils/capitalizeFirstLetter";

function PreviewRWDTabs() {
  const currentPreviewMode = useSharedState((state) => state.previewMode);
  const setField = useSharedState((state) => state.setField);

  if (currentPreviewMode === "single") return null;

  return (
    <Tabs
      value={currentPreviewMode}
      onChange={(_, newVal) => setField("previewMode", newVal)}
      variant="fullWidth"
      sx={(theme) => ({
        backgroundColor: theme.palette.background.header,
        // borderRadius: "16px 16px 0 0",
      })}
    >
      {Object.keys(BREAKPOINTS).map((key) => (
        <Tab
          key={key}
          value={key}
          label={capitalizeFirstLetter(key)}
          sx={{
            color: (theme) => theme.palette.secondary.light, // inactive color
          }}
        />
      ))}
    </Tabs>
  );
}

export default PreviewRWDTabs;