export type KnowledgePageHeaderProps = {
  title: string;
  subtitle: string;
  totalCount: number;
  totalSize: string;
  documentsLabel: string;
  storageLabel: string;
};

export default function KnowledgePageHeader({
  title,
  subtitle,
  totalCount,
  totalSize,
  documentsLabel,
  storageLabel,
}: KnowledgePageHeaderProps) {
  return (
    <div className="mb-6 flex shrink-0 flex-col justify-between gap-4 md:flex-row md:items-start">
      <div>
        <h1
          className="mb-3 text-4xl font-normal tracking-tight text-[#171717] dark:text-[#f3f4f6] md:text-4xl"
          style={{ fontFamily: "Georgia, Cambria, 'Times New Roman', Times, serif" }}
        >
          {title}
        </h1>
        <p className="text-[17px] text-[#171717]/70 dark:text-gray-400">{subtitle}</p>
      </div>

      <div className="grid gap-3 sm:grid-cols-2 md:mt-2 md:min-w-[320px]">
        <div className="rounded-2xl bg-[#f4f7fb] px-5 py-4 dark:bg-[#222225]">
          <div className="text-xs uppercase tracking-[0.18em] text-[#99A0AE] dark:text-gray-500">{documentsLabel}</div>
          <div className="mt-3 text-3xl font-semibold text-[#171717] dark:text-[#f3f4f6]">{totalCount}</div>
        </div>
        <div className="rounded-2xl bg-[#fff7ed] px-5 py-4 dark:bg-[#31251a]">
          <div className="text-xs uppercase tracking-[0.18em] text-[#6b7280] dark:text-gray-400">{storageLabel}</div>
          <div className="mt-3 text-3xl font-semibold text-[#171717] dark:text-[#f3f4f6]">{totalSize}</div>
        </div>
      </div>
    </div>
  );
}