import { cva } from "class-variance-authority"

import styles from "./item.module.css"

export const itemVariants = cva(styles.item, {
  variants: {
    order: {
      1: styles.order1,
      2: styles.order2,
      3: styles.order3,
      4: styles.order4,
      5: styles.order5,
      6: styles.order6,
      7: styles.order7,
      8: styles.order8,
      9: styles.order9,
    },
    // These are only placeholder classes
    // so that we can use compoundVariants
    columns: {
      2: styles.colTwo,
      3: styles.colThree,
      4: styles.colFour,
      6: styles.colSix,
      8: styles.colEight,
    },
    // These are only placeholder classes
    // so that we can use compoundVariants
    rows: {
      1: styles.rowOne,
      2: styles.rowTwo,
      3: styles.rowThree,
      6: styles.rowSix,
    },
  },
  compoundVariants: [
    {
      class: styles.c2r1,
      columns: 2,
      rows: 1,
    },
    {
      class: styles.c2r2,
      columns: 2,
      rows: 2,
    },
    {
      class: styles.c2r3,
      columns: 2,
      rows: 3,
    },
    {
      class: styles.c2r6,
      columns: 2,
      rows: 6,
    },
    {
      class: styles.c3r1,
      columns: 3,
      rows: 1,
    },
    {
      class: styles.c3r2,
      columns: 3,
      rows: 2,
    },
    {
      class: styles.c3r3,
      columns: 3,
      rows: 3,
    },
    {
      class: styles.c3r6,
      columns: 3,
      rows: 6,
    },
    {
      class: styles.c4r1,
      columns: 4,
      rows: 1,
    },
    {
      class: styles.c4r2,
      columns: 4,
      rows: 2,
    },
    {
      class: styles.c4r3,
      columns: 4,
      rows: 3,
    },
    {
      class: styles.c4r6,
      columns: 4,
      rows: 6,
    },
    {
      class: styles.c6r1,
      columns: 6,
      rows: 1,
    },
    {
      class: styles.c6r2,
      columns: 6,
      rows: 2,
    },
    {
      class: styles.c6r3,
      columns: 6,
      rows: 3,
    },
    {
      class: styles.c6r6,
      columns: 6,
      rows: 6,
    },
    {
      class: styles.c8r1,
      columns: 8,
      rows: 1,
    },
    {
      class: styles.c8r2,
      columns: 8,
      rows: 2,
    },
    {
      class: styles.c8r3,
      columns: 8,
      rows: 3,
    },
    {
      class: styles.c8r6,
      columns: 8,
      rows: 6,
    },
  ],
})