import Link from 'next/link'
import type { Project } from '@/payload-types'

interface ProjectPreviewProps {
  project: Project
  className?: string
  headingLevel?: 'h2' | 'h3'
}

export function ProjectPreview({
  project,
  className,
  headingLevel: TitleTag = 'h2',
}: ProjectPreviewProps) {
  const { title, slug, description } = project

  return (
    <Link
      href={`/projects/${slug}/`}
      className={[
        'group border-hair text-ink grid grid-cols-[1fr_auto] gap-8 border-b py-7 no-underline transition-[padding] duration-200 ease-out hover:pl-3',
        className ?? '',
      ]
        .join(' ')
        .trim()}
    >
      <div>
        <TitleTag className="group-hover:decoration-ink-4 m-0 mb-2.5 font-serif text-[28px] leading-tight font-normal tracking-[-0.015em] group-hover:underline group-hover:underline-offset-4">
          {title}
        </TitleTag>
        {description && (
          <p className="text-ink-2 m-0 text-[15px] leading-[1.55]">{description}</p>
        )}
      </div>
      <span className="text-ink-3 self-center font-mono text-base opacity-0 transition-opacity group-hover:opacity-100">
        →
      </span>
    </Link>
  )
}