import React from 'react';
import { cn } from '@/utils/utils';
import { NEUMORPHISM } from '@/styles/Neumorphism';


// IMPORTANT — contraste texte :
// Le fond clair (#e8e8e8) est assez lumineux. Dans le contenu de la Card,
// évite text-slate-400/500 en light mode (ratio WCAG insuffisant sur ce fond) :
// utilise plutôt text-slate-600 (ou plus foncé) pour le texte secondaire en light mode.
// Ex: className="text-slate-600 dark:text-slate-400"

interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  // 'raised'  : relief neumorphique complet — dashboards, widgets isolés, peu nombreux à l'écran.
  // 'flat'    : bordure fine, sans ombre — listes/tables denses (perf + lisibilité).
  variant?: 'raised' | 'flat'|'digged'|'prophunt';
}

export const Card = React.forwardRef<HTMLDivElement, CardProps>(
  ({ className, variant = 'raised', ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        // Style de base
        "rounded-3xl border-none transition-all duration-300 ease-in-out flex flex-col",
        "bg-[#e8e8e8] dark:bg-[#1e293b]",
        // Relief neumorphique (par défaut)
        variant === 'raised' && [NEUMORPHISM.lightShadow, NEUMORPHISM.darkShadow],
        variant === 'digged' && [NEUMORPHISM.insetDark, NEUMORPHISM.insetLight],
        variant === 'prophunt' && [NEUMORPHISM.insetDark, NEUMORPHISM.insetLight,NEUMORPHISM.lightShadowHover,NEUMORPHISM.darkShadowHover],
        // Variante plate : pas d'ombre, juste une bordure discrète — pour tables/listes denses
        variant === 'flat' && "border border-black/5 dark:border-white/10",
        className
      )}
      {...props}
    />
  )
);
Card.displayName = "Card";

export const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        // Séparation discrète (bordure fine plutôt qu'ombre inset, pour rester léger)
        "px-6 py-5 flex flex-col space-y-1.5 border-black/5 dark:border-white/5 transition-all duration-300",
        className
      )}
      {...props}
    />
  )
);
CardHeader.displayName = "CardHeader";

export const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn("p-6 flex-1 transition-all duration-300 ease-in-out", className)}
      {...props}
    />
  )
);
CardContent.displayName = "CardContent";