import { HTMLAttributes, forwardRef } from 'react';
import { cn } from '../../lib/cn';
type CardProps = HTMLAttributes<HTMLDivElement>;
export const Card = forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => {
return (
<div
ref={ref}
className={cn(
'rounded-xl border border-[rgb(var(--border-subtle))] bg-[rgb(var(--card))] p-6',
'shadow-[0_1px_3px_0_rgb(0_0_0/0.1),0_1px_2px_-1px_rgb(0_0_0/0.1)]',
'dark:shadow-[0_1px_3px_0_rgb(0_0_0/0.3),0_1px_2px_-1px_rgb(0_0_0/0.2)]',
className
)}
{...props}
/>
);
});
Card.displayName = 'Card';
export const CardHeader = forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => {
return <div ref={ref} className={cn('mb-4', className)} {...props} />;
});
CardHeader.displayName = 'CardHeader';
export const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
({ className, ...props }, ref) => {
return (
<h3
ref={ref}
className={cn('text-lg font-semibold text-[rgb(var(--card-foreground))]', className)}
{...props}
/>
);
}
);
CardTitle.displayName = 'CardTitle';
export const CardDescription = forwardRef<
HTMLParagraphElement,
HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
return (
<p
ref={ref}
className={cn('text-sm text-[rgb(var(--muted))] mt-1', className)}
{...props}
/>
);
});
CardDescription.displayName = 'CardDescription';
export const CardContent = forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => {
return <div ref={ref} className={cn('', className)} {...props} />;
});
CardContent.displayName = 'CardContent';
