import './content-cards.css'

interface cardProps {
  src?: string
  button_link?: string
  heading?: string
  button_text?: string
  card_text?: string
}

export default function ContentCard(CardProps: cardProps) {
  return (
    <article className="content-card group flex h-full w-full min-h-80 flex-col p-6">
      <div className="content-card-body flex h-full flex-col">
        <a href="#" className="block shrink-0">
          <div className="content-card-image aspect-video w-full">
            <img
              className="h-full w-full object-cover"
              src={CardProps.src}
              alt=""
            />
          </div>
        </a>
        <a href="#" className="mt-6 block shrink-0">
          <h5 className="mb-2 text-2xl font-semibold tracking-tight text-heading">
            {CardProps.heading}
          </h5>
        </a>
        <p className="mb-6 line-clamp-3 flex-1 text-body">{CardProps.card_text}</p>
        <a href="#" className="content-card-cta mt-auto self-start">
          {CardProps.button_text}
          <svg
            className="ms-1.5 -me-0.5 h-3 w-3 rtl:rotate-180"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            fill="none"
            viewBox="0 0 20 20"
          >
            <path
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M19 12H5m14 0-4 4m4-4-4-4"
            />
          </svg>
        </a>
      </div>
    </article>
  )
}