// shadcn Card — surface container with optional header / content / footer.
// Compound component: <Card><CardHeader><CardTitle/></CardHeader>...</Card>.

import type { HTMLAttributes, ReactNode } from 'react'
import { cn } from '../cn'

export const Card = ({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): ReactNode => (
  <div
    data-slot="card"
    className={cn(
      'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
      className,
    )}
    {...props}
  >
    {children}
  </div>
)

export const CardHeader = ({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): ReactNode => (
  <div
    data-slot="card-header"
    className={cn('grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6', className)}
    {...props}
  >
    {children}
  </div>
)

export const CardTitle = ({ className, children, ...props }: HTMLAttributes<HTMLHeadingElement>): ReactNode => (
  <h3
    data-slot="card-title"
    className={cn('leading-none font-semibold tracking-tight', className)}
    {...props}
  >
    {children}
  </h3>
)

export const CardDescription = ({ className, children, ...props }: HTMLAttributes<HTMLParagraphElement>): ReactNode => (
  <p
    data-slot="card-description"
    className={cn('text-muted-foreground text-sm', className)}
    {...props}
  >
    {children}
  </p>
)

export const CardContent = ({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): ReactNode => (
  <div
    data-slot="card-content"
    className={cn('px-6', className)}
    {...props}
  >
    {children}
  </div>
)

export const CardFooter = ({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): ReactNode => (
  <div
    data-slot="card-footer"
    className={cn('flex items-center px-6', className)}
    {...props}
  >
    {children}
  </div>
)