import Link from 'next/link'
import cx from 'classnames'

import Callout from '@/components/blocks/Callout'

type Resource = {
  resourceLink: {
    title: string
    url: string
  }
}

export type Props = {
  sectionTitle: string
  sectionDescription: string
  resources: Resource[]
}

export default function ResourceContent({ sectionTitle, sectionDescription, resources }: Props) {
  return (
    <article className="grid grid-cols-12 gap-4">
      <div className="col-span-12 md:col-span-5">
        <Callout heading={sectionTitle} content={`<p>${sectionDescription}</p>`} />
      </div>

      <div className="col-span-12 md:col-span-7 md:pl-[30px] max-md:pt-8">
        <ul>
          {resources.map(({ resourceLink: { url, title } }, index: number) => (
            <li key={index} className="border-b last:border-0">
              <Link
                href={url}
                className={cx('group flex justify-between items-center text-subtitle hover:text-accent-blue', {
                  'pb-8': index === 0,
                  'py-8': index > 0 && index < resources.length - 1,
                  'pt-8': index === resources.length - 1,
                })}
              >
                <span dangerouslySetInnerHTML={{ __html: title }} />
                <span aria-hidden className="fancy-arrow" />
              </Link>
            </li>
          ))}
        </ul>
      </div>
    </article>
  )
}