import { cn } from "@/lib/utils";
import { type HTMLAttributes } from "react";

interface CardProps extends HTMLAttributes<HTMLDivElement> {
  accent?: "unit-1" | "unit-2" | "unit-3" | "unit-4" | "unit-5";
  hover?: boolean;
}

const accentStyles = {
  "unit-1": "border-l-4 border-l-unit-1",
  "unit-2": "border-l-4 border-l-unit-2",
  "unit-3": "border-l-4 border-l-unit-3",
  "unit-4": "border-l-4 border-l-unit-4",
  "unit-5": "border-l-4 border-l-unit-5",
};

export function Card({
  accent,
  hover = false,
  className,
  children,
  ...props
}: CardProps) {
  return (
    <div
      className={cn(
        "rounded-3xl border-2 border-border/60 bg-surface p-6",
        "shadow-[var(--shadow-sm)]",
        accent && accentStyles[accent],
        hover && "transition-all duration-200 hover:-translate-y-1 hover:shadow-[var(--shadow-lg)]",
        className,
      )}
      {...props}
    >
      {children}
    </div>
  );
}

export function CardHeader({
  className,
  children,
  ...props
}: HTMLAttributes<HTMLDivElement>) {
  return (
    <div className={cn("mb-4", className)} {...props}>
      {children}
    </div>
  );
}

export function CardTitle({
  className,
  children,
  ...props
}: HTMLAttributes<HTMLHeadingElement>) {
  return (
    <h3
      className={cn("text-xl font-bold tracking-tight", className)}
      {...props}
    >
      {children}
    </h3>
  );
}

export function CardDescription({
  className,
  children,
  ...props
}: HTMLAttributes<HTMLParagraphElement>) {
  return (
    <p className={cn("text-sm text-muted", className)} {...props}>
      {children}
    </p>
  );
}