import React from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Command, Plus, Pencil, Trash } from "lucide-react"

interface CommandType {
  id: number;
  command: string;
  value: string;
  prompt: string;
}

interface CommandsSectionProps {
  commands: CommandType[];
  editCommand: (command: CommandType) => void;
  deleteCommand: (id: number) => void;
  setCurrentCommand: (command: CommandType) => void;
  setIsCommandDialogOpen: (open: boolean) => void;
}

const CommandsSection: React.FC<CommandsSectionProps> = ({
  commands,
  editCommand,
  deleteCommand,
  setCurrentCommand,
  setIsCommandDialogOpen
}) => (
  <Card className="shadow-md">
    <CardHeader className="flex flex-row items-center justify-between">
      <CardTitle className="flex items-center">
        <Command className="h-5 w-5 ml-2 text-primary" />
        دستورات (کامندها)
      </CardTitle>
      <Button
        size="sm"
        onClick={() => {
          setCurrentCommand({ id: 0, command: "", value: "", prompt: "" });
          setIsCommandDialogOpen(true);
        }}
      >
        <Plus size={16} className="ml-1" /> افزودن دستور
      </Button>
    </CardHeader>
    <CardContent>
      {commands.length === 0 ? (
        <div className="text-center py-8 border-2 border-dashed rounded-lg">
          <Command className="h-8 w-8 mx-auto mb-2 text-muted-foreground" />
          <p className="mb-3">هنوز دستوری اضافه نشده است</p>
          <Button
            size="sm"
            onClick={() => {
              setCurrentCommand({ id: 0, command: "", value: "", prompt: "" });
              setIsCommandDialogOpen(true);
            }}
          >
            افزودن اولین دستور
          </Button>
        </div>
      ) : (
        <div className="space-y-3">
          {commands.map(cmd => (
            <div key={cmd.id} className="p-3 border rounded-lg">
              <div className="flex items-start justify-between mb-2">
                <div>
                  <h3 className="font-medium text-primary">{cmd.command}</h3>
                  <p className="text-sm text-muted-foreground whitespace-pre-line">{cmd.value}</p>
                </div>
                <div className="flex gap-1">
                  <Button variant="ghost" size="icon" onClick={() => editCommand(cmd)}>
                    <Pencil size={16} />
                  </Button>
                  <Button variant="ghost" size="icon" onClick={() => deleteCommand(cmd.id)}>
                    <Trash size={16} />
                  </Button>
                </div>
              </div>
              <div className="mt-2 pt-2 border-t">
                <p className="text-sm font-medium">پرامپت:</p>
                <p className="text-xs text-muted-foreground">{cmd.prompt || "پرامپتی تعریف نشده است"}</p>
              </div>
            </div>
          ))}
        </div>
      )}
    </CardContent>
  </Card>
);

export default CommandsSection;