import { classNames } from '@/lib/components/classNames';
import type { HTMLAttributes, ReactNode } from 'react';
import styles from './Card.module.css';

export type SurfaceTone = 'default' | 'muted' | 'elevated' | 'strong';
export type SurfacePadding = 'none' | 'compact' | 'comfortable' | 'spacious';

interface CardProps extends HTMLAttributes<HTMLElement> {
  as?: 'article' | 'section' | 'div';
  tone?: SurfaceTone;
  padding?: SurfacePadding;
  interactive?: boolean;
  children: ReactNode;
}

export function Card({
  as: Component = 'article',
  tone = 'default',
  padding = 'comfortable',
  interactive = false,
  className,
  children,
  ...props
}: CardProps) {
  return (
    <Component
      className={classNames(
        styles.card,
        styles[tone],
        styles[padding],
        interactive && styles.interactive,
        className,
      )}
      {...props}
    >
      {children}
    </Component>
  );
}

export function Panel(props: Omit<CardProps, 'as'>) {
  return <Card as="section" {...props} />;
}
