1import {
 2    FormControl,
 3    FormField,
 4    FormItem,
 5    FormLabel,
 6    FormMessage,
 7    Input,
 8    Popover,
 9    PopoverTrigger,
10    PopoverContent,
11} from "@marzneshin/components";
12import { PopoverGuide } from '@marzneshin/features/hosts';
13import { useFormContext } from "react-hook-form";
14import { useTranslation } from "react-i18next";
15import { InfoIcon } from 'lucide-react';
16import { IsDisabled } from "./is-disabled";
17
18export const RemarkField = () => {
19    const { t } = useTranslation()
20    const form = useFormContext()
21    return (
22        <FormField
23            control={form.control}
24            name="remark"
25            render={({ field }) => (
26                <FormItem>
27                    <FormLabel className="flex flex-row items-center gap-2">
28                        {t('name')}
29                        <Popover>
30                            <PopoverTrigger>
31                                <InfoIcon className="size-5" />
32                            </PopoverTrigger>
33                            <PopoverContent className="w-80">
34                                <PopoverGuide />
35                            </PopoverContent>
36                        </Popover>
37                        <IsDisabled />
38                    </FormLabel>
39                    <FormControl>
40                        <Input {...field} />
41                    </FormControl>
42                    <FormMessage />
43                </FormItem>
44            )}
45        />
46    )
47}