import React from "react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"

interface PromptSectionProps {
  icon: React.ReactNode;
  title: string;
  type: string;
  description: string;
  variable: string;
  prompts: {
    skill: string;
    enthusiasm: string;
    customer: string;
    companyRanking: string;
  };
  setPrompts: React.Dispatch<React.SetStateAction<{
    skill: string;
    enthusiasm: string;
    customer: string;
    companyRanking: string;
  }>>;
  resetPrompt: (key: keyof typeof import("../data/defaults").DefaultValues["initialPromptTexts"]) => void;
}

const PromptSection: React.FC<PromptSectionProps> = ({
  icon,
  title,
  type,
  description,
  variable,
  prompts,
  setPrompts,
  resetPrompt
}) => (
  <div className="p-4 border rounded-lg">
    <div className="flex items-center justify-between mb-2">
      <div className="flex items-center gap-2">
        {icon}
        <h3 className="font-medium">{title}</h3>
      </div>
      <Button variant="outline" size="sm" onClick={() => resetPrompt(type as keyof typeof prompts)}>بازنشانی</Button>
    </div>
    <p className="text-sm text-muted-foreground mb-2">{description} - متغیر: {`{${variable}}`}</p>
    <Textarea
      className="w-full"
      value={prompts[type as keyof typeof prompts] || ""}
      onChange={e => setPrompts({ ...prompts, [type]: e.target.value })}
    />
  </div>
);

export default PromptSection;