/**
 * 체험 프로그램 · 카드 — 소요시간·대상까지 붙여 한 장씩. 처음 오는 손님이 고르기 쉽다.
 */
import {PriceRow, SectionBody, SectionFrame, SectionHeading} from '../../primitives';
import type {SectionRenderProps} from '../../types';
import {programItems} from './useProgramItems';

export function ProgramsCards(props: SectionRenderProps) {
  const {section, isSelected, onSelect, industryId, template} = props;
  const items = programItems(industryId);

  return (
    <SectionFrame section={section} isSelected={isSelected} onSelect={onSelect} tone="white">
      <SectionBody>
        <SectionHeading
          title={section.name}
          subtitle={section.description}
          colors={template.colors}
        />

        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {items.map((item) => (
            <PriceRow key={item.name} item={item} variant="card" colors={template.colors} />
          ))}
        </div>
      </SectionBody>
    </SectionFrame>
  );
}