type Props = { number: string; title: string; subtitle: string };

export function ChapterDivider({ number, title, subtitle }: Props) {
  return (
    <div className="h-full flex flex-col justify-center px-16 py-24 space-y-6">
      <p className="text-xs font-mono tracking-widest text-muted-foreground uppercase">Capitolo</p>
      <div className="space-y-2">
        <p className="text-8xl font-light text-primary">{number}</p>
        <div className="w-12 h-px bg-primary" />
      </div>
      <h2 className="text-5xl font-light text-foreground">{title}</h2>
      <p className="text-lg text-muted-foreground max-w-lg">{subtitle}</p>
    </div>
  );
}
