import * as React from "react"

import { cn } from "../../lib/utils"

// The card owns its padding; a flush card (a messenger or tab frame whose children reach the edge) opts out.
function Card({ className, flush = false, ...props }: React.ComponentProps<"div"> & { flush?: boolean }) {
  return (
    <div
      data-slot="card"
      className={cn(
        flush ? "flex flex-col gap-3" : "ak-card ak-card--panel flex flex-col gap-3",
        className
      )}
      {...props}
    />
  )
}

function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        "ak-card__header @container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 has-data-[slot=card-action]:grid-cols-[1fr_auto]",
        className
      )}
      {...props}
    />
  )
}

/**
 * / finding B10 - a card title can now BE a heading.
 *
 * THE DEFECT THIS ENABLES FIXING, and it is worth stating because the symptom sounds cosmetic: the
 * patient dashboard emitted exactly three headings - "Welcome, Patient One", "No Upcoming Appointments",
 * "No Unread Messages" - while the actual card titles ("Upcoming Appointments", "Unread Messages",
 * "Tasks") were `<div>`s. The document outline was therefore made of a greeting and two ABSENCE messages,
 * so a screen-reader user navigating by heading hears what they do NOT have and cannot reach the regions
 * those messages sit in.
 *
 * `as` DEFAULTS TO `div`, so this change renders nothing differently anywhere. Making every card title
 * a heading globally is the more complete answer and also a heading-order change across ~40 surfaces -
 * that belongs to a design pass, not to a bug card. Opting in per surface is what keeps this reviewable.
 */
type CardTitleElement = "div" | "h1" | "h2" | "h3" | "h4"

function CardTitle({
  className,
  as: Component = "div",
  ...props
}: React.ComponentProps<"div"> & { as?: CardTitleElement }) {
  return (
    <Component
      data-slot="card-title"
      className={cn("ak-card__title", className)}
      {...props}
    />
  )
}

function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-description"
      className={cn("ak-card__description", className)}
      {...props}
    />
  )
}

function CardAction({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
        className
      )}
      {...props}
    />
  )
}

function CardContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-content"
      className={className}
      {...props}
    />
  )
}

function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-footer"
      className={cn("ak-card__footer flex items-center", className)}
      {...props}
    />
  )
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
}