import Layout from "./components/Layout"
import Navbar from "./components/Navbar"
import useTranslation from 'next-translate/useTranslation'
import { faDiscord, faTwitter, faGithub, faKeybase, faInstagram } from '@fortawesome/free-brands-svg-icons'
import { faEnvelope, faBirthdayCake, faMapPin, faSchool } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import Link from 'next/link'
import Image from 'next/image'

import { useRouter } from 'next/router'

export default function About(props) {
  const router = useRouter()
  const { locale, locales, defaultLocale, pathname } = router
  const { t, lang } = useTranslation("status")
  const status = t('status')
  const location = t('location')
  const tottori = t('tottori')
  const hiroshima = t('hiroshima')

  return (

    <Layout title={status}>
      <Navbar />
        <div className="my-9 mx-9">
        {
         // Heading
        }
        <div className="mb-5">
          <p className="text-left text-4xl">{status} <p className="md:inline font-mono text-base sm:">Powered / Generated by Datadog.</p></p>
        </div>
        {
            // cherry Datadog
        }
        <h2 className="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">cherry</h2>
        <div className="flex xl:w-2/3">
        <div className="flex-1 bg-gray-900 text-white text-center rounded border border-gray-600"><p className="font-bold">CPU </p>i7-2600</div>
        <div className="flex-1 bg-gray-900 text-white text-center rounded border border-gray-600"><p className="font-bold">RAM </p>DDR3 16GB</div>
        <div className="flex-1 bg-gray-900 text-white text-center rounded border border-gray-600"><p className="font-bold">OS </p>Ubuntu Server 20.04.2 LTS</div>
        <div className="flex-1 bg-gray-900 text-white text-center rounded border border-gray-600"><p className="font-bold">{location} </p>{hiroshima}</div>
        </div>
        <div className="grid xl:grid-cols-3 lg:grid-cols-2 md:grid-cols-1 sm:grid-cols-1 gap-1 my-2">
            <div>
                <iframe src="https://app.datadoghq.com/graph/embed?token=7a00f4dcae63a970d317bd719e4b79d7c63c9892dc15f51ed96fb91509d6f960&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
            </div>
            <div>
                <iframe src="https://app.datadoghq.com/graph/embed?token=79a40b2e369373f28c2ba4a04cdf6dc6bbf773275baaa033dae5ee38f698c410&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
            </div>
            <div>
                <iframe src="https://app.datadoghq.com/graph/embed?token=dcded34f258bb355e0cdb3286b87a1552dc3c3db13d6b1b510dc1a611dea6cd6&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
            </div>
            <div>
                <iframe src="https://app.datadoghq.com/graph/embed?token=89bf832a795aa61af12a403d9fb1827cad3a9f661f8dc0ab3752a70034685684&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
            </div>
            <div>
                <iframe src="https://app.datadoghq.com/graph/embed?token=27defe77f9612b4ce14e620eeeb1c95576ef457be88a8432b7ab7378f30fa8d5&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
            </div>
            <div>
                <iframe src="https://app.datadoghq.com/graph/embed?token=e24e16fe6cfb3fc0f73273cfc7330c7e1911ce3fa8041342a527cb744c12bed0&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
            </div>
            <div>
                <iframe src="https://app.datadoghq.com/graph/embed?token=7cacb18efe30d0d98f56be3d44f4d53548ddb95e35563fda90bceda965ea790b&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
            </div>
        </div>
        {
            // raspberry Datadog
        }
        <h2 class="text-2xl text-left font-bold leading-7 sm:text-3xl sm:truncate">raspberry</h2>
        <div className="flex xl:w-2/3">
        <div className="flex-1 bg-gray-900 text-white text-center rounded border border-gray-600"><p className="font-bold">Model </p>Raspberry Pi 4 Model B Rev 1.2</div>
        <div className="flex-1 bg-gray-900 text-white text-center rounded border border-gray-600"><p className="font-bold">RAM </p>4GB</div>
        <div className="flex-1 bg-gray-900 text-white text-center rounded border border-gray-600"><p className="font-bold">OS </p>Raspbian GNU/Linux 10 (buster)</div>
        <div className="flex-1 bg-gray-900 text-white text-center rounded border border-gray-600"><p className="font-bold">{location} </p>{tottori}</div>
        
        </div>
        <div className="grid xl:grid-cols-3 lg:grid-cols-2 md:grid-cols-1 sm:grid-cols-1 gap-1 my-2">
            <div>
                <iframe src="https://app.datadoghq.com/graph/embed?token=de18008333aa661dec2e2dda4109cdad982bee24eded93b15a57e73f55e8fa6d&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
            </div>
            <div>
                <iframe src="https://app.datadoghq.com/graph/embed?token=5dc17d342bfc7ce83e09d790037fe8c41c2e0904bf4ba2dbfef704e068dc2862&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
            </div>
            <div>
                <iframe src="https://app.datadoghq.com/graph/embed?token=a3a7ba07fab53dc6db37c7de60af791d1c4938a55de7f50ea1ab3bdb8924c0c4&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
            </div>
            <div>
                <iframe src="https://app.datadoghq.com/graph/embed?token=89bf832a795aa61af12a403d9fb1827cad3a9f661f8dc0ab3752a70034685684&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
            </div>
            <div>
                <iframe src="https://app.datadoghq.com/graph/embed?token=48a62405818c27c2bd3be2daf4398494f444e33ea1f5784f8f42d20ffe8782b8&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
            </div>
            <div>
                <iframe src="https://app.datadoghq.com/graph/embed?token=c83f40c0b1c81b82d3bf4b9cbf2f0f98894ed3128604af511c27989fe5aef6a1&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
            </div>
            <div>
                <iframe src="https://app.datadoghq.com/graph/embed?token=e111dbe6960f3c9427d4738ff23a7e55b89633978b539f1db3d0d69a9334e801&height=300&width=380&legend=true" className="w-96 h-64" frameBorder="0"></iframe>
            </div>
        </div>

    </div>
        

    </Layout>
  )
}