Insight Card

import * as React from "react"
import { cn } from "cn"

/**
 * The night card that resolves many signals into one cause:
 * kicker, a serif finding, then label/value facts.
 */
function InsightCard({ className, ...props }: React.ComponentProps<"article">) {
  return (
    <article
      data-slot="insight-card"
      className={cn(
        "dark flex flex-col gap-5 rounded-card bg-night p-6 text-foreground shadow-[0_24px_48px_-24px_color-mix(in_oklab,var(--night),transparent_40%)] ring-1 ring-white/6 md:p-7",
        className
      )}
      {...props}
    />
  )
}

function InsightCardKicker({ className, ...props }: React.ComponentProps<"p">) {
  return (
    <p
      data-slot="insight-card-kicker"
      className={cn("text-caption font-medium text-brand", className)}
      {...props}
    />
  )
}

function InsightCardTitle({ className, ...props }: React.ComponentProps<"h3">) {
  return (
    <h3
      data-slot="insight-card-title"
      className={cn(
        "-mt-3 font-serif text-[1.75rem] leading-[1.1] font-normal tracking-[-0.022em] text-balance text-white",
        className
      )}
      {...props}
    />
  )
}

function InsightCardFacts({ className, ...props }: React.ComponentProps<"dl">) {
  return (
    <dl
      data-slot="insight-card-facts"
      className={cn("grid grid-cols-[minmax(5.5rem,auto)_1fr] gap-x-6 gap-y-3 border-t pt-5", className)}
      {...props}
    />
  )
}

function InsightCardFact({
  label,
  className,
  children,
}: {
  label: React.ReactNode
  className?: string
  children: React.ReactNode
}) {
  return (
    <>
      <dt className={cn("text-[0.9375rem] text-muted-foreground", className)}>{label}</dt>
      <dd className={cn("text-[0.9375rem] text-foreground", className)}>{children}</dd>
    </>
  )
}

export { InsightCard, InsightCardKicker, InsightCardTitle, InsightCardFacts, InsightCardFact }