// @design-system: layout/Card
// Registered at /design-system#card-layout

import type { HTMLAttributes, ReactNode } from 'react';
import { cn } from '@/lib/cn';

/** Props for the Card layout component */
export interface CardProps extends HTMLAttributes<HTMLDivElement> {
  /** Card content */
  children: ReactNode;
  /** Padding size. Default: 'md'. */
  padding?: 'none' | 'sm' | 'md' | 'lg';
}

const paddingMap: Record<NonNullable<CardProps['padding']>, string> = {
  none: '',
  sm: 'p-[var(--spacing-2)]',
  md: 'p-[var(--spacing-4)]',
  lg: 'p-[var(--spacing-6)]',
};

/**
 * Card — neutral surface for content grouping.
 *
 * White background, rounded corners, subtle border and shadow.
 * RTL-safe (logical padding via CSS custom properties).
 * Use GlassCard for frosted-glass premium hero sections instead.
 *
 * @example
 * ```tsx
 * <Card padding="md">
 *   <p>content</p>
 * </Card>
 * ```
 */
export function Card({ children, padding = 'md', className, ...props }: CardProps) {
  return (
    <div
      className={cn(
        'rounded-lg border border-border-default bg-[var(--fx-card-bg)] shadow-[var(--fx-card-shadow)]',
        'before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-[var(--fx-card-overlay)] before:content-[\'\']',
        'relative overflow-hidden',
        paddingMap[padding],
        className,
      )}
      data-fx="card"
      {...props}
    >
      <div className="relative">{children}</div>
    </div>
  );
}