"use client";

import { CopyableBlock } from "@/components/copyable";
import { SidebarItem } from "./SidebarItem";
import type { Prompt } from "@/lib/content";

interface PromptsSectionProps {
  prompts: Prompt[];
}

export function PromptsSection({ prompts }: PromptsSectionProps) {
  return (
    <section className="mb-8">
      <h2 className="text-sm font-medium text-muted-foreground mb-4">
        Prompts Used
      </h2>
      <div className="space-y-4">
        {prompts.map((prompt) => (
          <SidebarItem key={prompt.id} id={`prompt-${prompt.id}`}>
            <CopyableBlock
              label={prompt.label}
              content={prompt.content.trim()}
            />
          </SidebarItem>
        ))}
      </div>
    </section>
  );
}