import React from "react";
import { TimePicker as AntdTimePicker } from "antd";
import Label from "../Label/Label";
import styled from "styled-components";
import HelperText from "../HelperText/HelperText";

const StyledDivContainer = styled.div`
  width: 100%;
`;

const StyledTimePicker = styled(AntdTimePicker)`
  width: 100%;
`;

const TimePicker = (props) => {
  const { label, disabled, size, showTime, status, error, helperText, inputRef, ...rest } = props;

  return (
    <StyledDivContainer className="veris-antd-date-picker-wrapper">
      {label && <Label className="veris-date-picker-label" label={label} required={props?.required} />}

      <StyledTimePicker
        needConfirm={false}
        size={size}
        disabled={disabled}
        status={status || (error ? "error" : "")}
        ref={inputRef}
        showNow={false}
        {...rest}
      />
      {helperText && <HelperText error={status === "error" || error}>{helperText}</HelperText>}
    </StyledDivContainer>
  );
};

export default TimePicker;