import styled from 'styled-components';
import React from 'react';
import { TextArea } from '@bjsdistribution/dms-component-library';

interface IProps {
  refusedReason: string;
  setRefusedReason: React.Dispatch<React.SetStateAction<string>>;
}

function Notes(props: IProps) {
  const handleTextChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
    props?.setRefusedReason(event.target.value);
  };

  return (
    <Container>
      <div style={{ display: 'flex', flexDirection: 'row' }}>
        <Label>Notes</Label> <RequiredAsterisk>*</RequiredAsterisk>
      </div>
      <TextArea
        rows={15}
        onChange={handleTextChange}
        placeholder="Why did the customer refuse the selected service(s)? Add notes..."
        value={props?.refusedReason}
      />
    </Container>
  );
}

const RequiredAsterisk = styled.span`
  color: red;
  margin-left: 2px;
  font-size: x-small;
`;
const Label = styled.span`
  color: #6a7378;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
`;

const Container = styled.div`
  display: flex;
  gap: 5px;
  flex-direction: column;
  width: 100%;
`;

export default Notes;
