1import React from "react";
 2import { useFormContext, Controller } from "react-hook-form";
 3import { Input, Button, Separator } from "@marzneshin/common/components";
 4import { ListX } from "lucide-react";
 5
 6interface DynamicFieldProps {
 7    fieldIndex: number;
 8    parentFieldName: string;
 9    onRemove: () => void;
10}
11
12export const DynamicField: React.FC<DynamicFieldProps> = ({
13    fieldIndex,
14    parentFieldName,
15    onRemove,
16}) => {
17    const { control } = useFormContext();
18
19    return (
20        <div className="hstack gap-2 mt-1">
21            <div className="hstack gap-0 items-center border-ghost border-2 rounded-md">
22                <Controller
23                    name={`${parentFieldName}.${fieldIndex}.name`}
24                    control={control}
25                    render={({ field }) => (
26                        <Input
27                            {...field}
28                            className="border-none bg-transparent w-2/5 focus-visible:ring-offset-0 focus-visible:ring-0 text-end"
29                            placeholder="Header Name"
30                        />
31                    )}
32                />
33                <Separator className="h-2/4" orientation="vertical" />
34                <Controller
35                    name={`${parentFieldName}.${fieldIndex}.value`}
36                    control={control}
37                    render={({ field }) => (
38                        <Input
39                            {...field}
40                            className="border-none bg-transparent w-3/5 focus-visible:ring-0 focus-visible:ring-offset-0 text-start"
41                            placeholder="Header Value"
42                        />
43                    )}
44                />
45            </div>
46            <Button
47                variant="secondary-destructive"
48                size="icon"
49                onClick={onRemove}
50            >
51                <ListX />
52            </Button>
53        </div>
54    );
55};