text: import * as React from 'react'
  import { Helmet } from 'react-helmet'
  import styled from 'styled-components'
  import Layout from '../../components/Layout'
  
  // THE CONTENT IN THIS PAGE COMPONENT WILL BE REMOVED AND REPAACED WITH DATA COMING FROM THE BACKEND
  
  // ++++++++++++++++++++++++++++++++++++++
  // components
  import ArticleModal from '../../components/hsk/ArticleModal'
  
  // data
  import {
    a1,
    a2,
    a3,
    a4,
    a5,
    a6,
    a7,
    a8,
    a9,
    a10,
    a11,
    a12,
    a13,
    a14,
    a15,
    a16,
    a17,
    a18,
    a19,
    a20,
    a21,
    a22,
    a23,
    a24,
  } from '../../components/hsk/Hsk4data'
  
  // +++++++++++++++++++++++++++++++++++++++++
  
  const hsk4 = () => {
    return (
      <Layout>
        <Helmet>
          <meta charSet="utf-8" />
          <title>Kínverska - Lestur</title>
        </Helmet>
  
        <ScrollStyling>
          <div className="wrapper">
            {/* Only include six in each row */}
            <ArticleModal
              data={a6}
              titleIs="Hvernig er planið?"
              titleCn="计划好不好?"
            />
            <ArticleModal
              data={a5}
              titleIs="Ertu alltaf að skipta um vinnu?"
              titleCn="你又换个公司吗?"
            />
            <ArticleModal
              data={a4}
              titleIs="Hefðbundinn kínverskur fatnaður"
              titleCn="中山装和旗袍"
            />
            <ArticleModal
              data={a1}
              titleIs="Er álagið of mikið?"
              titleCn="压力多不多?"
            />
            <ArticleModal
              data={a2}
              titleIs="Get ég borgað með weixin?"
              titleCn="你有没有微信支付呢?"
            />
            <ArticleModal
              data={a3}
              titleIs="Hér er nafnspjaldið mitt"
              titleCn="这里是我的名片"
            />
          </div>
  
          <div className="wrapper">
            {/* Only include six in each row */}
            <ArticleModal
              data={a7}
              titleIs="Fyrirtækið náði loksins á flug!"
              titleCn="生意终于谈成了!"
            />
            <ArticleModal data={a8} titleIs="Takk allir!" titleCn="感谢大家!" />
            <ArticleModal
              data={a9}
              titleIs="Skiptir kaupið máli?"
              titleCn="工资重要吗?"
            />
            <ArticleModal
              data={a10}
              titleIs="Að borða fisk er ekki jafn gott og að veiða fisk."
              titleCn="授人以鱼不如授人以渔"
            />
            <ArticleModal
              data={a11}
              titleIs="Mig langar að kaupa sófa"
              titleCn="我想买沙发"
            />
            <ArticleModal
              data={a12}
              titleIs="Ísskápurinn okkar er of gamall"
              titleCn="咱家的冰箱太旧了"
            />
          </div>
          <div className="wrapper">
            {/* Only include six in each row */}
            <ArticleModal
              data={a13}
              titleIs="Auglýsingar segja ekki alla söguna"
              titleCn="广告只会介绍优点"
            />
            <ArticleModal
              data={a14}
              titleIs="Að kaupa réttu fötin"
              titleCn="只买对的，不买贵的"
            />
            <ArticleModal
              data={a15}
              titleIs="Að versla á netinu"
              titleCn="网上购物"
            />
            <ArticleModal
              data={a16}
              titleIs="Að fara í verslunarferð"
              titleCn="逛商场"
            />
            <ArticleModal data={a17} titleIs="Að kaupa djús" titleCn="买果汁" />
            <ArticleModal
              data={a18}
              titleIs="Því hærra verð, því hærri verða gæðin"
              titleCn="一分钱，一分货。"
            />
          </div>
          <div className="wrapper">
            {/* Only include six in each row */}
            <ArticleModal
              data={a19}
              titleIs="Það eru ágætis gæði í þessu!"
              titleCn="质量不错!"
            />
            <ArticleModal
              data={a20}
              titleIs="Tilboðsdagur"
              titleCn="购书送好礼活动"
            />
            <ArticleModal
              data={a21}
              titleIs="Því hærra verð, því hærri verða gæðin 2"
              titleCn="一分钱,一分货 2"
            />
            <ArticleModal data={a22} titleIs="绿色食品" titleCn="Grænar vörur" />
            <ArticleModal
              data={a23}
              titleIs="Kvikmyndir án hljóðs"
              titleCn="无声电影"
            />
            <ArticleModal
              data={a24}
              titleIs="Hvaða lit vilja konur klæðast."
              titleCn="衣服颜色的选择"
            />
          </div>
        </ScrollStyling>
      </Layout>
    )
  }
  
  export default hsk4
  
  // +++++++++++++++++++++++++++++++++++++
  // Styled components
  
  const ScrollStyling = styled.div`
    /* Smaller screens */
    .wrapper {
      display: flex;
      max-height: 220px;
      overflow-x: auto;
    }
  
    .wrapper::-webkit-scrollbar {
      width: 0;
    }
  
    /* Larger screens */
    @media (min-width: 768px) {
      .wrapper {
        flex-wrap: wrap;
        max-height: 100%;
        justify-content: center;
        margin: 10px;
      }
    }
  `
  