// import { height } from 'components/OpenGraphImage'
import Image from 'next/image'
import React, { useEffect, useState } from 'react'

export default function CardContent({ props }) {
  let { title, text, url } = props

  //console.log('urlnya', url)

  return (
    <div className="p-0 sm:pt-10">
      <div className="container pb-10 pt-10 sm:pb-10 sm:pt-0">
        <h1 className="text-center text-3xl font-semibold leading-tight text-yellow-600 sm:text-4xl">
          {title}
        </h1>
      </div>
      <div className="container overflow-hidden rounded-md border bg-stone-50 p-0">
        <div className="row g-0">
          {/* <div className="col-12">
            <div className="pb-10">
              <h1 className="text-center text-3xl font-semibold leading-tight text-yellow-600 sm:text-4xl">
                {title}
              </h1>
            </div>
          </div> */}
          <div className="col-12 p-0 md:col-6 sm:pr-5">
            <div>
              {(function () {
                if (Array.isArray(url)) {
                  if (url.length > 0) {
                    return (
                      // <div></div>
                      <Image
                        width={1000}
                        height={1000}
                        className="mx-auto h-full w-full p-0 sm:h-auto sm:w-full"
                        src={url[0]['asset']}
                        alt={url[0]['alt']}
                        objectFit="cover"
                      />
                    )
                  } else {
                    return <></>
                  }
                } else {
                  return (
                    <>
                      <Image
                        width={1000}
                        height={1000}
                        className="mx-auto h-full w-full p-0 sm:h-auto sm:w-full"
                        src={url}
                        alt={url[0]['alt']}
                        objectFit="cover"
                      />
                    </>
                  )
                }
              })()}
            </div>
          </div>
          <div className="sm:col-12 md:col-6">
            <div className="p-3">
              {(function () {
                if (Array.isArray(text)) {
                  return text.map((content, i) => {
                    if (i == 0 || i == 1) {
                      return (
                        <p
                          key={i}
                          className="p-5 font-sans text-base font-light"
                        >
                          {content}
                        </p>
                      )
                    } else {
                      return (
                        <p
                          key={i}
                          className="pb-5 font-sans font-light"
                          style={{ display: 'none' }}
                        >
                          {content}
                        </p>
                      )
                    }
                  })
                } else {
                  return <p className="pb-5 font-sans font-light">{text}</p>
                }
              })()}
              {/* <button className="readmore font-mono text-xs text-yellow-600 hover:text-stone-900 hover:underline">
                Read More
              </button> */}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export {}