import styled from 'styled-components'

const twoColumnBreakpoint = 'min-width: 744px'
const threeColumnBreakpoint = 'min-width: 1104px'

const One = styled.div``
const OneFewer = styled.div`
  @media (${threeColumnBreakpoint}) {
    grid-column: span 2;
  }
`
const OneTwoOne = styled.div`
  grid-column: span 1;

  @media (${twoColumnBreakpoint}) {
    grid-column: span 2;
  }

  @media (${threeColumnBreakpoint}) {
    grid-column: span 1;
  }
`

const Two = styled.div`
  @media (${twoColumnBreakpoint}) {
    grid-column: span 2;
  }
`
const All = styled.div`
  @media (${twoColumnBreakpoint}) {
    grid-column: span 2;
  }

  @media (${threeColumnBreakpoint}) {
    grid-column: span 3;
  }
`

const _ThreeColumnLayout = styled.div`
  align-items: start;
  max-width: 1056px;
  margin: 0 auto;
  display: grid;
  padding: 16px;
  grid-gap: 16px;
  grid-template-columns: 1fr;

  @media (${twoColumnBreakpoint}) {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 24px;
    padding: 24px;
  }

  @media (${threeColumnBreakpoint}) {
    grid-template-columns: repeat(3, 1fr);
  }
`

type ThreeColumnLayoutType = typeof _ThreeColumnLayout & {
  One: typeof One
  OneFewer: typeof OneFewer
  OneTwoOne: typeof OneTwoOne
  Two: typeof Two
  All: typeof All
  twoColumnBreakpoint: string
  threeColumnBreakpoint: string
}

export const ThreeColumnLayout = _ThreeColumnLayout as ThreeColumnLayoutType

ThreeColumnLayout.One = One
ThreeColumnLayout.OneFewer = OneFewer
ThreeColumnLayout.OneTwoOne = OneTwoOne
ThreeColumnLayout.Two = Two
ThreeColumnLayout.All = All
ThreeColumnLayout.twoColumnBreakpoint = twoColumnBreakpoint
ThreeColumnLayout.threeColumnBreakpoint = threeColumnBreakpoint

export { One, OneFewer, OneTwoOne, Two, All, twoColumnBreakpoint, threeColumnBreakpoint }