import {FC, useState} from "react";
import {Button, Flex} from "@mantine/core";
import SinglePriceInput, {PriceInputType} from "./SinglePriceInput.tsx";
import RangePriceInput, {PriceRangeInputType} from "./RangePriceInput.tsx";

type Props = {
    singlePriceInputProps: PriceInputType;
    priceRangeInputProps: PriceRangeInputType;

}

const ServicePriceInput: FC<Props> = ({priceRangeInputProps, singlePriceInputProps}) => {
    const [isUsingRange, setIsUsingRange] = useState<boolean>(priceRangeInputProps.value.length > 0);
    return (
        <>
            <Flex
                direction={"column"}
                gap={10}
            >
                {isUsingRange ?
                    <RangePriceInput
                        {...priceRangeInputProps}
                    /> :
                    <SinglePriceInput
                        {...singlePriceInputProps}
                    />}
                <Button
                    variant={"default"}
                    onClick={() => setIsUsingRange(!isUsingRange)}
                >
                    {isUsingRange ? "Использовать одну цену" : "Использовать диапазон цен"}
                </Button>
            </Flex>
        </>

    )
}

export default ServicePriceInput;