import type { DateTimePickerProps as MantineDateTimePickerProps } from '@mantine/dates';

import { DateTimePicker as MantineDateTimePicker } from '@mantine/dates';
import clsx from 'clsx';

import styles from './date-time-picker.module.css';

interface DateTimePickerProps extends MantineDateTimePickerProps {
    maxWidth?: number | string;
    width?: number | string;
}

export const DateTimePicker = ({
    classNames,
    clearable = false,
    maxWidth,
    popoverProps,
    size = 'sm',
    style,
    width,
    ...props
}: DateTimePickerProps) => {
    return (
        <MantineDateTimePicker
            classNames={{
                description: styles.description,
                input: clsx(styles.input, {
                    [styles.clearable]: clearable,
                }),
                label: styles.label,
                required: styles.required,
                root: styles.root,
                section: styles.section,
                ...classNames,
            }}
            clearable={clearable}
            clearButtonProps={{
                className: styles.clearButton,
            }}
            popoverProps={{ withinPortal: true, ...popoverProps }}
            size={size}
            style={{ maxWidth, width, ...style }}
            {...props}
        />
    );
};
