import React from "react"
import FontPreview from "./font-preview"
import { separator } from "../select-menu/index"

/*
  The fonts in this file are dived by separator which are classified by this structure

  [
    (serif fonts),
    separator,
    (sans serif fonts),
    separator,
    (handwritten fonts)
  ]

  Each font added to the file should be filed according to these attributes.
*/

export const fontOptions = [
  {
    value: "Alegreya, serif",
    label: "Alegreya",
    component: <FontPreview font="Alegreya" />,
    supportedWeights: [400, 500, 600, 700, 800, 900],
  },
  {
    value: "Arvo, serif",
    label: "Arvo",
    component: <FontPreview font="Arvo" />,
    supportedWeights: [400, 700],
  },
  {
    label: "Century Gothic",
    value: `'Century Gothic', Avenir, 'Trebuchet MS'`,
    supportedWeights: [400, 700],
    component: <FontPreview font="Century Gothic" noImport />,
    noImport: true,
  },
  {
    label: "Times New Roman",
    value: "'Times New Roman', Times, Georgia, serif",
    supportedWeights: [400, 500, 600, 700],
    component: <FontPreview font="Times New Roman" noImport />,
    noImport: true,
  },
  {
    label: "Courier New",
    value: `'Courier New', Courier, monospace`,
    supportedWeights: [400, 700],
    component: <FontPreview font="Courier New" noImport />,
    noImport: true,
  },
  {
    value: "Domine, serif",
    label: "Domine",
    supportedWeights: [400, 500, 700],
    component: <FontPreview font="Domine" />,
  },
  {
    value: "EB Garamond, serif",
    label: "EB Garamond",
    supportedWeights: [400, 500, 600, 700, 800],
    component: <FontPreview font="EB Garamond" />,
  },
  {
    value: "IBM Plex Serif, serif",
    label: "IBM Plex Serif",
    supportedWeights: [100, 200, 300, 400, 500, 600, 700],
    component: <FontPreview font="IBM Plex Serif" />,
  },
  {
    value: "Lora, serif",
    label: "Lora",
    supportedWeights: [400, 500, 600, 700],
    component: <FontPreview font="Lora" />,
  },
  {
    value: "Merriweather, serif",
    label: "Merriweather",
    component: <FontPreview font="Merriweather" />,
    supportedWeights: [300, 400, 700, 900],
  },
  {
    value: "Noto Serif, serif",
    label: "Noto Serif",
    supportedWeights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
    component: <FontPreview font="Noto Serif" />,
  },
  {
    label: "Arial",
    value: "Arial",
    supportedWeights: [100, 400, 700],
    component: <FontPreview font="Arial" noImport />,
    noImport: true,
  },
  {
    label: "Arial Black",
    value: "'Arial Black', 'Arial Bold'",
    supportedWeights: [400],
    component: <FontPreview font="Arial Black" noImport />,
    noImport: true,
  },
  {
    label: "Red Hat Display",
    value: "'Red Hat Display', Helvetica, Arial, sans-serif",
    supportedWeights: [300, 400, 500, 600, 700, 800, 900],
    component: <FontPreview font="Red Hat Display" />,
  },
  {
    value: "Playfair Display, serif",
    label: "Playfair Display",
    supportedWeights: [400, 500, 600, 700, 800, 900],
    component: <FontPreview font="Playfair Display" />,
  },
  {
    value: "PT Serif, serif",
    label: "PT Serif",
    supportedWeights: [400, 700],
    component: <FontPreview font="PT Serif" />,
  },
  {
    value: "Roboto Slab, serif",
    label: "Roboto Slab",
    supportedWeights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
    component: <FontPreview font="Roboto Slab" />,
  },
  {
    value: "Unna, serif",
    label: "Unna",
    supportedWeights: [400, 700],
    component: <FontPreview font="Unna" />,
  },
  {
    value: "Vollkorn, serif",
    label: "Vollkorn",
    supportedWeights: [400, 500, 600, 700, 800, 900],
    component: <FontPreview font="Vollkorn" />,
  },
  separator,
  {
    value: "Archivo, sans-serif",
    label: "Archivo",
    supportedWeights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
    component: <FontPreview font="Archivo" />,
  },
  {
    value: "Exo, sans-serif",
    label: "Exo",
    supportedWeights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
    component: <FontPreview font="Exo" />,
  },
  {
    label: "Geneva",
    value: "Geneva, Calibri",
    supportedWeights: [400, 700],
    component: <FontPreview font="Geneva" noImport />,
    noImport: true,
  },
  {
    label: "Georgia",
    value: "Georgia, Times, 'Times New Roman', serif",
    supportedWeights: [400, 700],
    component: <FontPreview font="Georgia" noImport />,
    noImport: true,
  },
  {
    label: "Inter",
    value: "Inter, Helvetica, Arial, sans-serif",
    supportedWeights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
    component: <FontPreview font="Inter" />,
  },
  {
    label: "Lucida Grande",
    value: "'Lucida Grande', Verdana",
    supportedWeights: [400, 700],
    component: <FontPreview font="Lucida Grande" noImport />,
    noImport: true,
  },
  {
    label: "Verdana",
    value: `Verdana`,
    supportedWeights: [400, 700],
    component: <FontPreview font="Verdana" noImport />,
    noImport: true,
  },
  {
    value: "IBM Plex Sans, sans-serif",
    label: "IBM Plex Sans",
    supportedWeights: [100, 200, 300, 400, 500, 600, 700],
    component: <FontPreview font="IBM Plex Sans" />,
  },
  {
    value: "Lato, sans-serif",
    label: "Lato",
    supportedWeights: [100, 300, 400, 700, 900],
    component: <FontPreview font="Lato" />,
  },
  {
    value: "Merriweather Sans, sans-serif",
    label: "Merriweather Sans",
    supportedWeights: [300, 400, 500, 600, 700, 800],
    component: <FontPreview font="Merriweather Sans" />,
  },
  {
    value: "Montserrat, sans-serif",
    label: "Montserrat",
    supportedWeights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
    component: <FontPreview font="Montserrat" />,
  },
  {
    value: "Noto Sans, sans-serif",
    label: "Noto Sans",
    supportedWeights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
    component: <FontPreview font="Noto Sans" />,
  },
  {
    value: "Nunito, sans-serif",
    label: "Nunito",
    supportedWeights: [200, 300, 400, 600, 700, 800, 900],
    component: <FontPreview font="Nunito" />,
  },
  {
    value: "Open Sans, sans-serif",
    label: "Open Sans",
    supportedWeights: [300, 400, 600, 700, 800],
    component: <FontPreview font="Open Sans" />,
  },
  {
    value: "Open Sans Condensed, sans-serif",
    label: "Open Sans Condensed",
    supportedWeights: [300, 700],
    component: <FontPreview font="Open Sans Condensed" weight={300} />,
  },
  {
    value: "Oswald, sans-serif",
    label: "Oswald",
    supportedWeights: [200, 300, 400, 500, 600, 700],
    component: <FontPreview font="Oswald" />,
  },
  {
    value: "PT Sans, sans-serif",
    label: "PT Sans",
    supportedWeights: [400, 700],
    component: <FontPreview font="PT Sans" />,
  },
  {
    value: "PT Sans Narrow, sans-serif",
    label: "PT Sans Narrow",
    supportedWeights: [400, 700],
    component: <FontPreview font="PT Sans Narrow" />,
  },
  {
    value: "Raleway, sans-serif",
    label: "Raleway",
    supportedWeights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
    component: <FontPreview font="Raleway" />,
  },
  {
    value: "Roboto, sans-serif",
    label: "Roboto",
    supportedWeights: [100, 300, 400, 500, 700, 900],
    component: <FontPreview font="Roboto" />,
  },
  {
    value: "Roboto Condensed, sans-serif",
    label: "Roboto Condensed",
    supportedWeights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
    component: <FontPreview font="Roboto Condensed" />,
  },
  {
    value: "Rubik, sans-serif",
    label: "Rubik",
    supportedWeights: [300, 400, 500, 600, 700, 800, 900],
    component: <FontPreview font="Rubik" />,
  },
  {
    value: "Work Sans, sans-serif",
    label: "Work Sans",
    supportedWeights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
    component: <FontPreview font="Work Sans" />,
  },
  {
    label: "Bricolage Grotesque",
    value: `'Bricolage Grotesque', Helvetica, sans-serif`,
    supportedWeights: [200, 300, 400, 500, 600, 700, 800],
    component: <FontPreview font="Bricolage Grotesque" />,
  },
  {
    label: "Figtree",
    value: `Figtree, sans-serif`,
    supportedWeights: [300, 400, 500, 600, 700, 800, 900],
    component: <FontPreview font="Figtree" />,
  },
  {
    label: "Poppins",
    value: `Poppins, sans-serif`,
    supportedWeights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
    component: <FontPreview font="Poppins" />,
  },
  separator,
  {
    value: "Allura, cursive",
    label: "Allura",
    supportedWeights: [400],
    component: <FontPreview font="Allura" />,
  },
  {
    value: "Amatic SC, cursive",
    label: "Amatic SC",
    supportedWeights: [400],
    component: <FontPreview font="Amatic SC" />,
  },
  {
    value: "Anton, sans-serif",
    label: "Anton",
    supportedWeights: [400],
    component: <FontPreview font="Anton" />,
  },
  {
    value: "Bangers, sans-serif",
    label: "Bangers",
    supportedWeights: [400],
    component: <FontPreview font="Bangers" />,
  },
  {
    value: "Dancing Script, cursive",
    label: "Dancing Script",
    supportedWeights: [400, 500, 600, 700],
    component: <FontPreview font="Dancing Script" />,
  },
  {
    value: "Permanent Marker, sans-serif",
    label: "Permanent Marker",
    supportedWeights: [400],
    component: <FontPreview font="Permanent Marker" />,
  },
]
