// https://ui.shadcn.com/docs/components/card
import type * as React from 'react'
import { cn } from '../../utils/cn'

type CardProps = React.HTMLAttributes<HTMLDivElement> & {
  ref?: React.Ref<HTMLDivElement>
}

/**
 * Surface container for grouping related content. Renders a bordered,
 * rounded panel with a background. Compose with CardHeader, CardContent,
 * and CardFooter to build standard card layouts.
 */
const Card = ({ className, ref, ...props }: CardProps) => (
  <div
    ref={ref}
    className={cn(
      'rounded-lg border border-solid border-border bg-card text-card-foreground',
      className,
    )}
    {...props}
  />
)
Card.displayName = 'Card'

/** Top section of a card. Lays out a title and optional description in a grid. Supports an optional CardAction in the trailing column. */
const CardHeader = ({ className, ref, ...props }: CardProps) => (
  <div
    ref={ref}
    className={cn(
      'grid grid-rows-[auto_auto] items-start gap-1.5 p-6 has-[[data-slot=card-action]]:grid-cols-[1fr_auto]',
      className,
    )}
    {...props}
  />
)
CardHeader.displayName = 'CardHeader'

type CardTitleProps = React.HTMLAttributes<HTMLHeadingElement> & {
  ref?: React.Ref<HTMLParagraphElement>
}

/** Primary heading inside CardHeader. Renders an `<h3>` element. */
const CardTitle = ({ className, ref, ...props }: CardTitleProps) => (
  <h3
    ref={ref}
    className={cn('font-semibold leading-none tracking-tight', className)}
    {...props}
  />
)
CardTitle.displayName = 'CardTitle'

type CardDescriptionProps = React.HTMLAttributes<HTMLParagraphElement> & {
  ref?: React.Ref<HTMLParagraphElement>
}

/** Secondary text below the card title. Renders a `<p>` in muted foreground. */
const CardDescription = ({
  className,
  ref,
  ...props
}: CardDescriptionProps) => (
  <p
    ref={ref}
    className={cn('text-sm text-muted-foreground', className)}
    {...props}
  />
)
CardDescription.displayName = 'CardDescription'

/** Trailing slot in CardHeader for a button or other action element. Aligns to the top-right of the header grid. */
const CardAction = ({ className, ref, ...props }: CardProps) => (
  <div
    ref={ref}
    data-slot="card-action"
    className={cn(
      'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
      className,
    )}
    {...props}
  />
)
CardAction.displayName = 'CardAction'

/** Main body of the card. Provides horizontal padding and clips overflow. */
const CardContent = ({ className, ref, ...props }: CardProps) => (
  <div
    ref={ref}
    className={cn('overflow-hidden p-6 pt-0', className)}
    {...props}
  />
)
CardContent.displayName = 'CardContent'

/** Bottom section of a card. Lays out action buttons in a row, right-aligned. On mobile, buttons expand to full width. */
const CardFooter = ({ className, ref, ...props }: CardProps) => (
  <div
    ref={ref}
    className={cn(
      'flex flex-col items-center gap-2 p-6 pt-0 [&_button]:md:w-full [&_button]:md:max-w-none',
      className,
    )}
    {...props}
  />
)
CardFooter.displayName = 'CardFooter'

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