import {Badge} from "@/components/ui/badge";
import {Separator} from "@/components/ui/separator";

type Props = {
  title: string;
  excerpt?: string;
  chapterCount: number;
  previewEnabled: boolean;
};

export function ResourceHeader({title, excerpt, chapterCount, previewEnabled}: Props) {
  return (
    <header className="space-y-4">
      <div className="flex flex-wrap items-center gap-2">
        <Badge variant="secondary">{previewEnabled ? "Draft preview" : "Published view"}</Badge>
        <Badge variant="outline">{chapterCount} chapter(s)</Badge>
      </div>
      <h1 className="text-balance text-3xl font-semibold tracking-tight md:text-4xl">{title}</h1>
      {excerpt ? <p className="max-w-3xl text-base leading-7 text-muted-foreground">{excerpt}</p> : null}
      <Separator />
    </header>
  );
}