import { forwardRef } from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

/**
 * Card — surface standardisée.
 * - `default` : bg-white, border line, ombre douce. Pour les formulaires.
 * - `flat`    : bg-cream-2, pas d'ombre. Pour les blocs informatifs.
 * - `hero`    : bg-white, ombre carte (plus marquée). Pour les éléments-héros.
 *
 * Le radius est 14px (--radius-card) — un peu plus rond que les boutons (6px).
 * Cohérent avec la landing.
 */
const cardVariants = cva(
  cn("rounded-card", "transition-shadow duration-150"),
  {
    variants: {
      variant: {
        default: "bg-white border border-line shadow-soft",
        flat: "bg-cream-2",
        hero: "bg-white border border-line shadow-card",
      },
      padding: {
        none: "p-0",
        sm: "p-5",
        md: "p-7",
        lg: "p-9",
      },
    },
    defaultVariants: {
      variant: "default",
      padding: "md",
    },
  },
);

export type CardProps = React.HTMLAttributes<HTMLDivElement> &
  VariantProps<typeof cardVariants>;

export const Card = forwardRef<HTMLDivElement, CardProps>(
  ({ className, variant, padding, ...props }, ref) => (
    <div ref={ref} className={cn(cardVariants({ variant, padding }), className)} {...props} />
  ),
);
Card.displayName = "Card";
