import type { HTMLAttributes, PropsWithChildren } from "react";
import { cn } from "../../lib/cn";

export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
  return <div className={cn("uhuru-card", className)} {...props} />;
}

export function CardHeader({
  eyebrow,
  title,
  description,
  className,
}: {
  eyebrow?: string;
  title: string;
  description?: string;
  className?: string;
}) {
  return (
    <div className={cn("flex flex-col gap-2 border-b border-[var(--uhuru-border-subtle)] px-5 py-4", className)}>
      {eyebrow ? (
        <span className="text-xs font-medium uppercase tracking-[0.16em] text-[var(--uhuru-accent-strong)]">
          {eyebrow}
        </span>
      ) : null}
      <h3
        className="m-0 text-xl tracking-[-0.03em] text-[var(--uhuru-text-primary)]"
        style={{ fontFamily: "var(--uhuru-font-heading)" }}
      >
        {title}
      </h3>
      {description ? <p className="m-0 text-sm leading-6 text-[var(--uhuru-text-secondary)]">{description}</p> : null}
    </div>
  );
}

export function CardBody({
  className,
  children,
}: PropsWithChildren<{ className?: string }>) {
  return (
    <div className={cn("flex flex-col gap-5 px-5 py-5 text-sm text-[var(--uhuru-text-primary)]", className)}>
      {children}
    </div>
  );
}