import React, { PropsWithoutRef } from 'react';
import styled from 'styled-components';
import CloseIcon from '../../../assets/icons/CloseIcon';

type Props = PropsWithoutRef<JSX.IntrinsicElements['div']>;

function ClearDate(props: Props) {
  return (
    <Container {...props}>
      <CloseIcon />
      <Text>Clear date</Text>
    </Container>
  );
}

const Text = styled.span`
  color: #a3a5a5;
  font-size: 15px;
  font-family: 'Lato', sans-serif;
  text-decoration: underline;
  color: inherit;
  cursor: pointer;
`;

const Container = styled.div`
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a3a5a5;
`;

export default styled(ClearDate)``;
