import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import moment from "moment-timezone";
import Countdown from "react-countdown";
import Heading from "../../Components/Heading/Heading";
import Ibutton from "../../Components/Button/Button";
import InputField from "../../Components/Inputfield/Inputfield";
import { useTranslation } from 'react-i18next';
import "./Commingsoon.css";
export default function Commingsoon() {
  // Random component
  const Completionist = () => <span>You are good to go!</span>;
  const { t } = useTranslation();

  // Renderer callback with condition
  const renderer = ({ days, hours, minutes, seconds, completed }) => {
    if (completed) {
      // Render a complete state
      return <Completionist />;
    } else {
      // Render a countdown
      return (
        <span className="pt-5" style={{ letterSpacing: "0px" }}>
          <Row>
            <Col className="text-center" lg={3} md={3} sm={3} xs={3}>
              {days}
              <div
                style={{
                  fontSize: "18px",
                  letterSpacing: "0px",
                  fontFamily: "Light",
                }}>
               {t("days")}
              </div>
            </Col>
            <Col lg={3} md={3} sm={3} xs={3}>
              {hours}
              <div
                style={{
                  fontSize: "18px",
                  letterSpacing: "0px",
                  fontFamily: "Light",
                }}>
                 {t("hours")}
              </div>
            </Col>
            <Col lg={3} md={3} sm={3} xs={3}>
              {minutes}
              <div
                style={{
                  fontSize: "18px",
                  letterSpacing: "0px",
                  fontFamily: "Light",
                }}>
                {t("minutes")}
              </div>
            </Col>
            <Col lg={3} md={3} sm={3} xs={3}>
              {seconds}
              <div
                style={{
                  fontSize: "18px",
                  letterSpacing: "0px",
                  fontFamily: "Light",
                }}>
               {t("seconds")}
              </div>
            </Col>
          </Row>
          {/* {days}:{hours}:{minutes}:{seconds}
          <p >days:Hours:minutes:seconds</p> */}
        </span>
      );
    }
  };
  return (
    <>
      <Container className="mt-5 pt-5">
        <Row className="mt-5 pt-5 justify-content-center">
          <Col lg={8} className="text-center ">
            <Heading
              title={t('We are coming soon')} 
              fontSize="5vw"
              fontFamily="semibold"
            />
            <p
              className="pt-3 pb-3"
              style={{ fontFamily: "Light", fontSize: "18px" }}>
              {t("All logs and records together in an easy-to-use and transparent system.")}
              
          
     
            </p>
            <Row className="justify-content-center">
              <Col lg={8} md={8}>
                <span
                  style={{
                    color: "black",
                    fontSize: "45px",
                    fontFamily: "semibold",
                  }}>
                  <Countdown
                    date={moment
                      .unix(1650272774)
                      .tz("Europe/Budapest")
                      .toString()}
                    renderer={renderer}
                  />
                </span>
              </Col>
            </Row>
          </Col>
        </Row>
        <Row className="justify-content-center mt-5">
          <Col lg={6}>
            <Row className="align-items-center">
              <Col lg={8} md={8} sm={8} xs={12}>
                <InputField placeholder="something@example.com" />
              </Col>
              <Col lg={4} md={4} sm={4} xs={12}>
                <div className="d-grid">
                  <Ibutton className="subscribeBtn" title= {t('Subscribe')} />
                </div>
              </Col>
            </Row>
          </Col>
        </Row>
      </Container>
    </>
  );
}
