import { Label, TextArea } from '@bjsdistribution/dms-component-library';
import React from 'react';
import styled from 'styled-components';
import { useOrderDetails } from '../../../store';

function OtherInstructions() {
  const [orderDetails, setOrderDetails] = useOrderDetails();

  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setOrderDetails(prev => {
      return {
        ...prev,
        other_instructions: e.target.value,
      };
    });
  };

  return (
    <Container>
      <Label label="Other Instructions (simple instructions)" />
      <CustomTextArea
        value={orderDetails?.other_instructions || ''}
        placeholder="add other instructions"
        onChange={onChange}
      />
    </Container>
  );
}

const CustomTextArea = styled(TextArea)`
  flex: 1;
  resize: none;
`;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
`;

export default OtherInstructions;
