import { Placeholder } from "@/components/Placeholder";
import { Container } from "@/components/Container";
import { glossyBar } from "@/lib/glossy";

export function PageHero({
  kicker,
  title,
  image,
}: {
  kicker: string;
  title: string;
  image: string;
}) {
  return (
    <section className="relative h-[160px] overflow-hidden bg-ink sm:h-[200px]">
      <Placeholder src={image} alt={title} className="absolute inset-0 h-full w-full object-cover" />
      <div className="absolute inset-0 bg-ink/75" />
      <Container className="relative flex h-full items-center px-4 sm:px-6">
        <div className="max-w-xl rounded-2xl px-6 py-4 sm:px-8 sm:py-5" style={glossyBar}>
          <p className="font-latin text-[10px] font-bold tracking-[0.32em] text-white/60 uppercase">{kicker}</p>
          <h1 className="mt-1.5 line-clamp-2 text-[22px] font-extrabold leading-snug text-white sm:text-[28px]">{title}</h1>
        </div>
      </Container>
    </section>
  );
}