import { styled } from "../../theme";
import { Box } from "../box";

const StyledGrid = styled(Box, {
  display: "grid",

  variants: {
    columns: {
      1: {
        gridTemplateColumns: "repeat(1, minmax(0, 1fr))",
      },
      2: {
        gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
      },
      3: {
        gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
      },
      4: {
        gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
      },
      5: {
        gridTemplateColumns: "repeat(5, minmax(0, 1fr))",
      },
      6: {
        gridTemplateColumns: "repeat(6, minmax(0, 1fr))",
      },
      7: {
        gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
      },
      8: {
        gridTemplateColumns: "repeat(8, minmax(0, 1fr))",
      },
      9: {
        gridTemplateColumns: "repeat(9, minmax(0, 1fr))",
      },
      10: {
        gridTemplateColumns: "repeat(10, minmax(0, 1fr))",
      },
      11: {
        gridTemplateColumns: "repeat(11, minmax(0, 1fr))",
      },
      12: {
        gridTemplateColumns: "repeat(12, minmax(0, 1fr))",
      },
    },
    span: {
      0: {
        display: "none",
      },
      1: {
        gridColumn: "span 1",
      },
      2: {
        gridColumn: "span 2",
      },
      3: {
        gridColumn: "span 3",
      },
      4: {
        gridColumn: "span 4",
      },
      5: {
        gridColumn: "span 5",
      },
      6: {
        gridColumn: "span 6",
      },
      7: {
        gridColumn: "span 7",
      },
      8: {
        gridColumn: "span 8",
      },
      9: {
        gridColumn: "span 9",
      },
      10: {
        gridColumn: "span 10",
      },
      11: {
        gridColumn: "span 11",
      },
      12: {
        gridColumn: "span 12",
      },
      full: {
        gridColumn: "1/-1",
      },
    },
    gap: {
      1: {
        gap: "$1",
      },
      2: {
        gap: "$2",
      },
      3: {
        gap: "$3",
      },
      4: {
        gap: "$4",
      },
      5: {
        gap: "$5",
      },
      6: {
        gap: "$6",
      },
      7: {
        gap: "$7",
      },
      8: {
        gap: "$8",
      },
      9: {
        gap: "$9",
      },
      10: {
        gap: "$10",
      },
    },
    gapX: {
      1: {
        columnGap: "$1",
      },
      2: {
        columnGap: "$2",
      },
      3: {
        columnGap: "$3",
      },
      4: {
        columnGap: "$4",
      },
      5: {
        columnGap: "$5",
      },
      6: {
        columnGap: "$6",
      },
      7: {
        columnGap: "$7",
      },
      8: {
        columnGap: "$8",
      },
      9: {
        columnGap: "$9",
      },
      10: {
        columnGap: "$10",
      },
    },
    gapY: {
      1: {
        rowGap: "$1",
      },
      2: {
        rowGap: "$2",
      },
      3: {
        rowGap: "$3",
      },
      4: {
        rowGap: "$4",
      },
      5: {
        rowGap: "$5",
      },
      6: {
        rowGap: "$6",
      },
      7: {
        rowGap: "$7",
      },
      8: {
        rowGap: "$8",
      },
      9: {
        rowGap: "$9",
      },
      10: {
        rowGap: "$10",
      },
    },
  },
});

export const Grid = StyledGrid;