import { forwardRef, type HTMLAttributes } from "react";
import { cn } from "@/lib/utils";
const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => (
<div
className={cn(
"rounded-2xl border border-border bg-card text-card-foreground shadow-sm",
className,
)}
ref={ref}
{...props}
/>
),
);
Card.displayName = "Card";
const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => (
<div
className={cn("flex flex-col space-y-1.5 p-5", className)}
ref={ref}
{...props}
/>
),
);
CardHeader.displayName = "CardHeader";
const CardTitle = forwardRef<
HTMLParagraphElement,
HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h3
className={cn(
"font-semibold text-sm leading-none tracking-tight",
className,
)}
ref={ref}
{...props}
/>
));
CardTitle.displayName = "CardTitle";
const CardDescription = forwardRef<
HTMLParagraphElement,
HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<p
className={cn("text-muted-foreground text-xs", className)}
ref={ref}
{...props}
/>
));
CardDescription.displayName = "CardDescription";
const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => (
<div className={cn("p-5 pt-0", className)} ref={ref} {...props} />
),
);
CardContent.displayName = "CardContent";
export { Card, CardHeader, CardTitle, CardDescription, CardContent };
