1import {
 2    FormControl,
 3    FormField,
 4    FormItem,
 5    FormLabel,
 6    FormMessage,
 7    Select,
 8    SelectContent,
 9    SelectItem,
10    SelectTrigger,
11    SelectValue,
12} from "@marzneshin/components";
13import { useFormContext } from "react-hook-form";
14import { useTranslation } from "react-i18next";
15import { alpnOptions } from "@marzneshin/features/hosts";
16
17export const AlpnField = () => {
18    const { t } = useTranslation();
19    const form = useFormContext();
20
21    return (
22        <FormField
23            control={form.control}
24            name="alpn"
25            render={({ field }) => (
26                <FormItem className="w-full">
27                    <FormLabel>{t("alpn")}</FormLabel>
28                    <Select onValueChange={field.onChange} defaultValue={field.value}>
29                        <FormControl>
30                            <SelectTrigger>
31                                <SelectValue placeholder="Select ALPN" />
32                            </SelectTrigger>
33                        </FormControl>
34                        <SelectContent>
35                            {alpnOptions.map((option) => (<SelectItem value={option}>{option}</SelectItem>))}
36                        </SelectContent>
37                    </Select>
38                    <FormMessage />
39                </FormItem>
40            )}
41        />
42    );
43};