import type { ReactNode } from 'react'
import { Eyebrow } from './Eyebrow'

interface PageIntroProps {
  eyebrow: string
  title: string
  copy?: string
  action?: ReactNode
}

export function PageIntro({ eyebrow, title, copy, action }: PageIntroProps) {
  return (
    <div className="mb-[31px] flex flex-col items-start gap-5 sm:flex-row sm:items-center sm:justify-between">
      <div>
        <Eyebrow>{eyebrow}</Eyebrow>
        <h1 className="mt-[7px] mb-[5px] font-display text-[29px] font-semibold tracking-[-1px] text-ink sm:text-[34px]">{title}</h1>
        {copy && <p className="text-sm text-muted">{copy}</p>}
      </div>
      {action}
    </div>
  )
}