import type { ContentPillarId } from "@/features/studio/types/studio";
import { MOCK_CONTENT_PILLARS } from "@/features/studio/mocks/contentPillars";
import { PillarCard } from "@/features/studio/ui/strategySource/PillarCard";

interface PillarSelectListProps {
  selectedPillarId: ContentPillarId | null;
  onPillarSelect: (id: ContentPillarId) => void;
}

export function PillarSelectList({ selectedPillarId, onPillarSelect }: PillarSelectListProps) {
  return (
    <div>
      <h3 className="font-serif font-bold text-2xl text-navy-900 mb-2 break-keep">콘텐츠 전략</h3>
      <p className="text-sm text-neutral-60 mb-6 break-keep">콘텐츠의 핵심 메시지 필러를 선택하세요</p>

      <div className="space-y-3">
        {MOCK_CONTENT_PILLARS.map((pillar) => (
          <PillarCard
            key={pillar.id}
            pillar={pillar}
            isSelected={selectedPillarId === pillar.id}
            onSelect={onPillarSelect}
          />
        ))}
      </div>
    </div>
  );
}