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

/** `ref` is a plain prop in React 19, so a caller can hand the card to GSAP. */
export function Card({
  className,
  ref,
  ...props
}: HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement> }) {
  return (
    <div
      ref={ref}
      className={cn(
        'rounded-2xl border bg-[var(--surface-raised)] p-6 shadow-[0_1px_2px_rgba(0,0,0,0.04)]',
        className,
      )}
      {...props}
    />
  );
}