import { Rule } from '../rule.js'

export default [
  // LARGE
  Rule({
    details: {
      id: 'large-collection',
      title: 'Large',
      description: 'Large tablets, desktops, tvs'
    },
    props: {
      type: 'breakpoint'
    },
    type: 'collection'
  }),
  Rule({
    details: {
      id: 'xxlarge',
      slug: 'xxlarge',
      title: 'Extra extra large',
      collectionId: 'large-collection'
    },
    props: {
      minWidth: 1401,
      maxWidth: Infinity,
      query: '(min-width: 1401px)'
    },
    type: 'breakpoint'
  }),
  Rule({
    details: {
      id: 'xlarge',
      slug: 'xlarge',
      title: 'Extra large',
      collectionId: 'large-collection'
    },
    props: {
      minWidth: 1200,
      maxWidth: 1400,
      query: '(min-width: 1200px) and (max-width: 1400px)'
    },
    type: 'breakpoint'
  }),
  Rule({
    details: {
      id: 'large',
      title: 'Large',
      slug: 'large',
      collectionId: 'large-collection'
    },
    props: {
      maxWidth: 1199,
      minWidth: 992,
      query: '(min-width: 992px) and (max-width: 1199px)'
    },
    type: 'breakpoint'
  }),

  // MEDIUM
  Rule({
    details: {
      id: 'medium-collection',
      title: 'Medium',
      description: 'Phones in landscape, tablets'
    },
    props: {
      type: 'breakpoint'
    },
    type: 'collection'
  }),
  Rule({
    details: {
      id: 'medium',
      title: 'Medium',
      slug: 'medium',
      collectionId: 'medium-collection'
    },
    props: {
      minWidth: 768,
      maxWidth: 991,
      query: '(min-width: 768px) and (max-width: 991px)'
    },
    type: 'breakpoint'
  }),

  // SMALL
  Rule({
    details: {
      id: 'small-collection',
      title: 'Small',
      description: 'Mobile phones and tiny screens'
    },
    props: {
      type: 'breakpoint'
    },
    type: 'collection'
  }),
  Rule({
    details: {
      id: 'small',
      title: 'Small',
      slug: 'small',
      collectionId: 'small-collection'
    },
    props: {
      minWidth: 576,
      maxWidth: 767,
      query: '(min-width: 576px) and (max-width: 767px)'
    },
    type: 'breakpoint'
  }),
  Rule({
    details: {
      id: 'xsmall',
      slug: 'xsmall',
      title: 'Extra small',
      collectionId: 'small-collection'
    },
    props: {
      minWidth: 0,
      maxWidth: 575,
      query: '(max-width: 575px)'
    },
    type: 'breakpoint'
  })
]