import * as React from 'react';
import { cn } from '@/shared/lib/utils';

/**
 * EN: Card component - Container for grouping related content
 * VI: Component Card - Container để nhóm các nội dung liên quan
 *
 * @param className - Additional CSS classes / Các class CSS bổ sung
 * @param hover - Enable hover lift effect / Bật hiệu ứng nâng khi hover
 * @param bordered - Show border / Hiển thị border
 */
const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & {
    hover?: boolean;
    bordered?: boolean;
  }
>(({ className, hover, bordered, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      // EN: Base card styles / VI: Style cơ bản cho card
      'bg-bg-secondary rounded-lg p-6 transition-all duration-[250ms] ease-out',
      // EN: Hover effect - lift with shadow / VI: Hiệu ứng hover - nâng với shadow
      hover && 'hover:-translate-y-0.5 hover:shadow-lg',
      // EN: Border variant / VI: Biến thể có border
      bordered && 'border border-border-primary',
      className
    )}
    {...props}
  />
));
Card.displayName = 'Card';

/**
 * EN: CardHeader component - Header section of the card
 * VI: Component CardHeader - Phần header của card
 */
const CardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn('mb-4', className)}
    {...props}
  />
));
CardHeader.displayName = 'CardHeader';

/**
 * EN: CardTitle component - Title text in card header
 * VI: Component CardTitle - Text tiêu đề trong card header
 */
const CardTitle = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h3
    ref={ref}
    className={cn(
      'text-xl font-semibold text-text-primary',
      className
    )}
    {...props}
  />
));
CardTitle.displayName = 'CardTitle';

/**
 * EN: CardDescription component - Descriptive text in card header
 * VI: Component CardDescription - Text mô tả trong card header
 */
const CardDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <p
    ref={ref}
    className={cn(
      'text-sm text-text-secondary mt-1',
      className
    )}
    {...props}
  />
));
CardDescription.displayName = 'CardDescription';

/**
 * EN: CardContent component - Main content area of the card
 * VI: Component CardContent - Khu vực nội dung chính của card
 */
const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn('', className)}
    {...props}
  />
));
CardContent.displayName = 'CardContent';

/**
 * EN: CardFooter component - Footer section of the card
 * VI: Component CardFooter - Phần footer của card
 */
const CardFooter = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn('mt-4 flex items-center', className)}
    {...props}
  />
));
CardFooter.displayName = 'CardFooter';

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };