import { Grid, NumberInput, Paper, Select, Stack, TextInput } from "@mantine/core";
import { t } from "../../config/i18n";

export type CreateProductProps = {
    form: Record<string, any>;
}

export default function CreateProduct({form}: CreateProductProps) {
    return (
        <Stack>
            <Grid>
                <Grid.Col span={{ base: 12, md: 6, lg: 6 }}>
                    <TextInput
                        label={t("product name")}
                        placeholder={t("product name")}
                        radius="sm"
                        withAsterisk
                        {...form.getInputProps('name')}
                    />
                    <NumberInput
                        label={t("product price")}
                        placeholder={t("product price")}
                        radius="sm"
                        withAsterisk
                        {...form.getInputProps('price')}
                    />
                    <TextInput
                        label={t("product weight")}
                        placeholder={t("product weight")}
                        radius="sm"
                        withAsterisk
                        {...form.getInputProps('weight')}
                    />
                </Grid.Col>
                <Grid.Col span={{ base: 12, md: 6, lg: 6 }}>
                    <Select
                        label={t("product type")}
                        placeholder={t("product type")}
                        radius="sm"
                        data={[
                            {value: "1", label: t("planned")}, 
                            {value: "2", label: t("reccurent")}
                        ]}
                        defaultValue={"1"}
                        clearable
                        {...form.getInputProps('type')}
                    />
                    <NumberInput
                        label={t("product price kg")}
                        placeholder={t("product price kg")}
                        radius="sm"
                        withAsterisk
                        {...form.getInputProps('pricekg')}
                    />
                     <Select
                        label={t("product unit")}
                        placeholder={t("product unit")}
                        radius="sm"
                        data={[
                            {value: "1", label: t("grams")}, 
                            {value: "2", label: t("kilo")},
                            {value: "3", label: t("piece")}
                        ]}
                        defaultValue={"2"}
                        clearable
                        {...form.getInputProps('unit')}
                    />
                </Grid.Col>
            </Grid>
        </Stack>
    );
}