import Link from 'next/link'

export interface PageIntroAction {
  href: string
  label: string
}

export default function PageIntro({
  eyebrow,
  title,
  description,
  actions = [],
}: {
  eyebrow?: string
  title: string
  description: string
  actions?: PageIntroAction[]
}) {
  return (
    <div className="mb-6 rounded-3xl border border-gray-200 bg-white/90 p-5 shadow-sm dark:border-gray-700 dark:bg-gray-800/80 sm:mb-8 sm:p-6">
      {eyebrow ? (
        <div className="mb-3 inline-flex rounded-full border border-sky-200 bg-sky-50 px-3 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-sky-700 dark:border-sky-900/60 dark:bg-sky-950/30 dark:text-sky-300">
          {eyebrow}
        </div>
      ) : null}
      <h1 className="text-3xl font-bold text-gray-900 dark:text-white sm:text-4xl">{title}</h1>
      <p className="mt-3 max-w-4xl text-sm leading-7 text-gray-600 dark:text-gray-400 sm:text-base">
        {description}
      </p>
      {actions.length > 0 ? (
        <div className="mt-5 flex flex-wrap gap-3">
          {actions.map((action) => (
            <Link
              key={`${action.href}-${action.label}`}
              href={action.href}
              className="rounded-full border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition hover:border-primary-400 hover:text-primary-700 dark:border-gray-600 dark:text-gray-200 dark:hover:text-primary-300"
            >
              {action.label}
            </Link>
          ))}
        </div>
      ) : null}
    </div>
  )
}
