"use client";

import { HTMLAttributes } from "react";

interface CardProps extends HTMLAttributes<HTMLDivElement> {
  hover?: boolean;
  padding?: "none" | "sm" | "md" | "lg";
}

const paddings = { none: "", sm: "p-3", md: "p-4 sm:p-5", lg: "p-5 sm:p-6" };

/** Carte standard du design system (surface + bordure + ombre douce). */
export default function Card({ hover, padding = "md", className = "", children, ...props }: CardProps) {
  return (
    <div className={`card ${hover ? "card-hover" : ""} ${paddings[padding]} ${className}`} {...props}>
      {children}
    </div>
  );
}

export function CardTitle({ children, className = "", action }: { children: React.ReactNode; className?: string; action?: React.ReactNode }) {
  return (
    <div className={`flex items-center justify-between gap-3 mb-3 ${className}`}>
      <h2 className="text-[13px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 flex items-center gap-2">{children}</h2>
      {action}
    </div>
  );
}