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

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

  return (
    <div className="p-10">
      <div className="container mb-20">
        <div className="row g-0">
          <div className="col-12">
            <div className="p-10">
              <Image
                width={200}
                height={200}
                className="mx-auto h-48 w-48 rounded-full md:h-auto md:w-48"
                src={url}
                alt="image description"
              />
              <div className="p-3">
                <h1 className="mb-3 text-3xl">{title}</h1>
                {text.map((content, i) => {
                  return (
                    <p key={i} className="mb-3">
                      {content}
                    </p>
                  )
                })}
                <button className="mt-5">Read More</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export {}