1import { FC } from "react";
 2import { FormLabel, Switch } from '@marzneshin/components';
 3import { useTranslation } from 'react-i18next';
 4import { DataLimitField, DataLimitResetStrategyField } from "../../fields";
 5import { useFormContext } from "react-hook-form";
 6import { useDataLimit } from "./use-data-limit";
 7
 8export const DataLimitFields: FC = () => {
 9    const { t } = useTranslation();
10    const { isDataLimitEnabled, setIsDataLimitEnabled } = useDataLimit();
11    const form = useFormContext();
12
13    const handleToggleChange = () => {
14        setIsDataLimitEnabled(!isDataLimitEnabled);
15    };
16
17    return (
18        <div className="my-2">
19            <FormLabel className="hstack justify-between items-center text-md my-2" >
20                {t('page.users.data_limit_method')}
21                <Switch checked={isDataLimitEnabled} onCheckedChange={handleToggleChange} />
22            </FormLabel>
23            <div className="flex gap-2 items-center w-full sm:flex-row md:flex-col">
24                {isDataLimitEnabled && (
25                    <div className="flex gap-2 items-center w-full">
26                        <DataLimitField />
27                        {form.watch().data_limit !== 0 && <DataLimitResetStrategyField />}
28                    </div>
29                )}
30            </div>
31        </div>
32    );
33};