import 'react-multi-carousel/lib/styles.css'

import { height } from 'components/OpenGraphImage'
import Image from 'next/image'
import Link from 'next/link'
import React, { useEffect, useState } from 'react'
// import Carousel from 'react-multi-carousel'
import { Carousel } from '@material-tailwind/react'
import Container from 'components/BlogContainer'

export default function CardContentHistory({ props }) {
  let { title, subtitle, text, image, footer } = props

  return (
    <div className="pt-10 sm:m-10 sm:pt-0">
      <div className="container_ mb-20">
        <div className="row g-0 rounded-md border bg-stone-50 p-0">
          <div className="col-12">
            <div className="p-7 sm:p-10">
              <h1 className="text-3xl font-semibold text-yellow-600 sm:text-4xl">
                {title}
              </h1>
              <h2 className="pb-5 text-left font-sans text-sm font-bold uppercase text-gray-900 sm:text-4xl">
                {subtitle}
              </h2>

              <div className="pb-5">
                <Carousel loop={true} placeholder={null}>
                  {(function () {
                    if (image != null) {
                      return image.map((dat, i) => {
                        //console.log(dat.url)

                        return (
                          <Image
                            width={800}
                            height={800}
                            key={i}
                            src={dat.url}
                            style={{
                              display: 'block',
                              height: '100%',
                              margin: 'auto',
                              width: '100%',
                            }}
                            alt={dat.alt}
                          />
                        )
                      })
                    }
                    return <div></div>
                  })()}
                </Carousel>

                {/* <Carousel
                  additionalTransfrom={0}
                  arrows
                  autoPlaySpeed={3000}
                  centerMode={false}
                  className=""
                  containerClass="container"
                  dotListClass=""
                  draggable
                  focusOnSelect={false}
                  infinite
                  itemClass=""
                  keyBoardControl
                  minimumTouchDrag={80}
                  pauseOnHover
                  renderArrowsWhenDisabled={false}
                  renderButtonGroupOutside={false}
                  renderDotsOutside={false}
                  responsive={{
                    desktop: {
                      breakpoint: {
                        max: 3000,
                        min: 1024,
                      },
                      items: 1,
                    },
                    mobile: {
                      breakpoint: {
                        max: 464,
                        min: 0,
                      },
                      items: 1,
                    },
                    tablet: {
                      breakpoint: {
                        max: 1024,
                        min: 464,
                      },
                      items: 1,
                    },
                  }}
                  rewind={false}
                  rewindWithAnimation={false}
                  rtl={false}
                  shouldResetAutoplay
                  showDots
                  sliderClass=""
                  slidesToSlide={1}
                  swipeable
                >
                  {(function () {
                    if (image != null) {
                      return image.map((dat, i) => {
                        return (
                          <Image
                            width={200}
                            height={200}
                            key={i}
                            src={dat.url}
                            style={{
                              display: 'block',
                              height: '100%',
                              margin: 'auto',
                              width: '100%',
                            }}
                            alt={dat.alt}
                          />
                        )
                      })
                    }
                    return <div></div>
                  })()}
                </Carousel> */}
              </div>

              <div className="">
                {text.map((content, i) => {
                  return (
                    <p key={i} className="font-sans font-light">
                      {content}
                    </p>
                  )
                })}
                {(function () {
                  if (footer != null) {
                    return (
                      <div className="pt-10">
                        <div className="text-right text-2xl font-semibold leading-tight text-yellow-600 duration-300 ease-in hover:text-stone-900 sm:text-2xl">
                          {footer.title}
                        </div>
                        <div className="mb-3 text-right font-sans text-3xl font-semibold uppercase">
                          <div
                            className="inline-block"
                            style={{
                              width: '250px',
                              borderBottom: '1px solid #808080',
                            }}
                          >
                            <a
                              href={footer.downloadpdf}
                              target="_blank"
                              download
                              className="duration-300 ease-in-out hover:text-yellow-600"
                            >
                              {footer.subTitle}
                            </a>
                          </div>
                        </div>
                      </div>
                    )
                  }
                })()}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export {}