import type { HTMLAttributes } from 'react';

interface CardProps extends HTMLAttributes<HTMLDivElement> {
  padding?: 'none' | 'sm' | 'md' | 'lg';
}

const paddingClasses = { none: '', sm: 'p-3', md: 'p-5', lg: 'p-8' };

export function Card({ padding = 'md', className = '', children, ...props }: CardProps) {
  return (
    <div
      {...props}
      className={[
        'rounded-[var(--radius-xl)] border border-[var(--color-neutral-200)] bg-white shadow-sm',
        paddingClasses[padding], className,
      ].join(' ')}
    >
      {children}
    </div>
  );
}
