interface TitleProps {
  text: string;
  size?: "sm" | "md" | "lg" | "xl";
  subtitle?: string;
  emphasis?: string;
}

const SIZE_MAP = { sm: "text-sm", md: "text-base", lg: "text-lg", xl: "text-xl" };

export function Title({ text, size = "lg", subtitle, emphasis }: TitleProps) {
  return (
    <div class="mb-3 mt-5">
      <h2 class={`${SIZE_MAP[size]} font-semibold`}>{text}</h2>
      {subtitle && <p class="text-[var(--z-font-md)] mt-0.5" style={{ color: "var(--z-muted)" }}>{subtitle}</p>}
      {emphasis && <p class="text-xs mt-1" style={{ color: "var(--z-accent-light)" }}>{emphasis}</p>}
    </div>
  );
}
