import type { HTMLAttributes, ReactNode } from "react";

export interface CardProps extends HTMLAttributes<HTMLDivElement> {
  /** 그림자 제거(헤어라인만) */
  flat?: boolean;
  /** accent-tint 배경 강조 패널 (좌측바 대신 틴트) */
  tint?: boolean;
  children?: ReactNode;
}

/** 카드: 헤어라인 + 미세 그림자. 상단 강조선 금지. radius 8px. §7.3 */
export function Card({ flat, tint, className, children, ...rest }: CardProps) {
  const cls = [
    "vg-card",
    flat ? "vg-card--flat" : "",
    tint ? "vg-card--tint" : "",
    className ?? "",
  ]
    .filter(Boolean)
    .join(" ");
  return (
    <div className={cls} {...rest}>
      {children}
    </div>
  );
}