import type { ReactNode } from "react";

interface TableProps {
  children: ReactNode;
  /** 배치(레이아웃) 조정용 클래스 패스스루만 허용 — 디자인 값 주입 금지. */
  className?: string;
}

/** 테이블 컨테이너 — 가로 스크롤 래퍼(`overflow-x-auto`) + `<table>`. */
export function Table({ children, className }: TableProps) {
  return (
    <div className={`w-full overflow-x-auto ${className ?? ""}`}>
      <table className="w-full border-collapse text-body-sm text-foreground">{children}</table>
    </div>
  );
}

interface TableSectionProps {
  children: ReactNode;
}

/** 테이블 헤더 영역(`<thead>`). */
export function TableHead({ children }: TableSectionProps) {
  return <thead className="bg-surface-muted">{children}</thead>;
}

/** 테이블 본문 영역(`<tbody>`). */
export function TableBody({ children }: TableSectionProps) {
  return <tbody>{children}</tbody>;
}

interface TableRowProps {
  children: ReactNode;
  className?: string;
}

/** 테이블 행(`<tr>`) — 아래쪽 구분선을 기본으로 갖는다. */
export function TableRow({ children, className }: TableRowProps) {
  return <tr className={`border-b border-border ${className ?? ""}`}>{children}</tr>;
}

interface TableCellProps {
  children: ReactNode;
  className?: string;
}

/** 헤더 셀(`<th>`). */
export function TableHeaderCell({ children, className }: TableCellProps) {
  return (
    <th
      className={`px-3 py-2 text-left text-label-md text-foreground-muted ${className ?? ""}`}
    >
      {children}
    </th>
  );
}

/** 본문 셀(`<td>`). */
export function TableCell({ children, className }: TableCellProps) {
  return <td className={`px-3 py-2 text-body-sm ${className ?? ""}`}>{children}</td>;
}