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';
16
17export const RemarkField = () => {
18    const { t } = useTranslation()
19    const form = useFormContext()
20    return (
21        <FormField
22            control={form.control}
23            name="remark"
24            render={({ field }) => (
25                <FormItem>
26                    <FormLabel className="flex flex-row items-center gap-2">
27                        {t('name')}
28                        <Popover>
29                            <PopoverTrigger>
30                                <InfoIcon className="size-5" />
31                            </PopoverTrigger>
32                            <PopoverContent className="w-80">
33                                <PopoverGuide />
34                            </PopoverContent>
35                        </Popover>
36                    </FormLabel>
37                    <FormControl>
38                        <Input {...field} />
39                    </FormControl>
40                    <FormMessage />
41                </FormItem>
42            )}
43        />
44    )
45}