import * as React from 'react';

import { cn } from '@/lib/utils';

/**
 * `.card` is defined in src/index.css (12px, surface, 1px border, no shadow)
 * so the shell and the demos agree on one surface treatment; this component
 * is the React face of it. Where a card is a link the caller adds
 * `hover:border-border-strong` — the border is the hover, never a shadow.
 */
function Card({ className, ...props }: React.ComponentProps<'div'>) {
  return <div className={cn('card text-fg', className)} {...props} />;
}

function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
  return <div className={cn('flex flex-col gap-1.5 p-4 sm:p-5', className)} {...props} />;
}

function CardTitle({ className, ...props }: React.ComponentProps<'h3'>) {
  return <h3 className={cn('text-h3 text-fg', className)} {...props} />;
}

function CardDescription({ className, ...props }: React.ComponentProps<'p'>) {
  return <p className={cn('text-small text-muted', className)} {...props} />;
}

function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
  return <div className={cn('p-4 pt-0 sm:p-5 sm:pt-0', className)} {...props} />;
}

function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
  return <div className={cn('flex items-center p-4 pt-0 sm:p-5 sm:pt-0', className)} {...props} />;
}

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