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

interface HeaderProps {
  title: string;
  actions?: React.ReactNode;
  showInformation?: boolean;
  infoText?: string;
  onClose: () => void;
}

function OrderActionHeader(props: HeaderProps) {
  const {
    title,
    actions,
    showInformation = false,
    infoText = ' ',
    onClose,
  } = props;

  return (
    <Container>
      <Wrapper>
        <Title>{title}</Title>
        {showInformation && <AdditionalInformation info={infoText} />}
        {actions}
      </Wrapper>

      <IconContainer onClick={onClose}>
        <CrossIcon />
      </IconContainer>
    </Container>
  );
}

const Wrapper = styled.div`
  display: flex;
  gap: 6px;
  align-items: center;
  width: 90%;
  margin-left: 20px;
`;

const IconContainer = styled.div`
  svg > path {
    fill: #ffffff;
  }
  cursor: pointer;
`;

const Title = styled.h3`
  margin: 0;
  padding: 0;
  color: #edebe8;
  text-transform: uppercase;
  font-size: 20px;
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 900;
  text-wrap: nowrap;
`;

const Container = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: #3a3630;
  border-radius: 12px 12px 0px 0px;
  padding: 10px 15px 10px 15px;
  position: sticky;
  top: 0;
  z-index: 9;
`;

export default OrderActionHeader;
