// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import * as React from 'react';
import { Field } from "@coreai-ds/react-components";
import { DateTimePicker } from "@coreai-ds/react-components";

export const Clearable = () => {
    const [value, setValue] = React.useState<Date | null>(new Date(2026, 6, 1));
    const styles = /* css */ `
      .date-time-picker-clearable-example__control {
        max-width: 300px;
      }
    `;
    return (<>
        <style>{styles}</style>
        <Field label="Select a date" hint={value ? `Selected: ${value.toDateString()}` : 'No date selected'}>
          <DateTimePicker className="date-time-picker-clearable-example__control" clearable value={value} onChange={(_ev, data) => setValue(data.value)}/>
        </Field>
      </>);
};

export default Clearable;