/**
 * 기본 정보 · 한 줄 요약 — 값들을 문장처럼 이어 붙인 가장 좁은 형태.
 * 정보가 적거나, 아래 섹션으로 빨리 넘기고 싶을 때.
 */
import {
  HiddenFieldsNotice,
  InfoRow,
  SectionBody,
  SectionFrame,
  SectionHeading,
} from '../../primitives';
import type {SectionRenderProps} from '../../types';
import {TODAY_KO} from '../common';

export function InfoInline(props: SectionRenderProps) {
  const {section, isSelected, onSelect, template, infoFields} = props;
  const visible = infoFields.filter((f) => !f.requiresVerification || f.isVerified);
  const hidden = infoFields.filter((f) => f.requiresVerification && !f.isVerified).length;

  return (
    <SectionFrame section={section} isSelected={isSelected} onSelect={onSelect} tone="white">
      <SectionBody width="narrow">
        <SectionHeading
          variant="minimal"
          title={section.name}
          subtitle={section.description}
          trailing={<HiddenFieldsNotice count={hidden} />}
          colors={template.colors}
        />

        <div className="flex flex-wrap gap-x-5 gap-y-2.5 rounded-xl border border-stone-200/70 bg-stone-50/60 p-4">
          {visible.map((field) => (
            <InfoRow key={field.id} field={field} variant="inline" colors={template.colors} />
          ))}
        </div>

        <span className="block font-mono text-[11px] text-stone-400">* {TODAY_KO} 기준</span>
      </SectionBody>
    </SectionFrame>
  );
}