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