import React from 'react';
import { Label, Menu } from 'app/shared/components/text/text';

export interface Props {
  label: string;
  info?: React.ReactNode;
  subLabel?: string;
}

const DashboardVesselListLabel = ({
  label,
  subLabel,
  info,
}: Props) => <div className="o-layout o-layout--vertical">
  <div className="o-layout o-layout--aligned">
    <Label extraClass="c-dashboard-vessel-list-label">
      {label}
    </Label>
    <div className="c-dashboard-vessel-list-label__info u-margin-left--small">
      {info}
    </div>
  </div>
  <Menu extraClass="u-color--dark-grey u-margin-bottom--none">
    {subLabel ? subLabel : ''}
  </Menu>
</div>;

export { DashboardVesselListLabel };