import type { ElementType, ReactNode } from 'react';

type CardPadding = 'none' | 'sm' | 'md' | 'lg';

type CardProps<T extends ElementType = 'div'> = {
  children: ReactNode;
  padding?: CardPadding;
  as?: T;
  className?: string;
} & Omit<React.ComponentPropsWithoutRef<T>, 'as' | 'children' | 'className'>;

const paddingClassMap: Record<CardPadding, string> = {
  none: '',
  sm: 'p-3',
  md: 'p-4',
  lg: 'p-6',
};

export function Card<T extends ElementType = 'div'>({
  children,
  as,
  className = '',
  padding = 'md',
  ...props
}: CardProps<T>) {
  const Component = as ?? 'div';

  return (
    <Component
      className={`rounded-[var(--radius-lg)] border border-card-border bg-card text-card-foreground ${paddingClassMap[padding]} ${className}`}
      {...props}
    >
      {children}
    </Component>
  );
}