import React, { Dispatch } from 'react';
import * as Text from '../../../shared/components/text/text';

export interface Props {
  isCollapsed: boolean;
  onClick: Dispatch<boolean>;
}

const BunkerAdjustmentCollapsible = ({ isCollapsed, onClick }: Props) => (
  <div className="u-margin-top" onClick={() => onClick(!isCollapsed)}>
    <Text.Paragraph
      size="small"
      extraClass="u-color--primary u-margin-bottom--none u-align--right u-cursor--pointer"
    >
      {isCollapsed
        ? <>See Breakdown <i className="icon-flat-arrow-down u-font-size--small u-margin-left--tiny"/></>
        : <>Hide Breakdown <i className="icon-flat-arrow-up u-font-size--small u-margin-left--tiny"/></>
      }
    </Text.Paragraph>
  </div>
);

export default BunkerAdjustmentCollapsible;