// @flow
import React from 'react'
import moment from 'moment'
import monetize from 'formatters/monetize'

import {
  InformationHeaderWrapper,
  Title,
  ShortDescription,
  Icon,
  TradingPercent,
  SpecsTable,
  SpecsCell,
  Separator,
  SpecsTitle,
  SpecsDetail,
  InfoWrapper
} from './Wrappers'

import locationIcon from './assets/location-icon.svg'

import type { AssetDataT } from 'components/BoxElements/AssetBox'

type Props = {
  assetData: AssetDataT
}

const InformationHeader = ({ assetData }: Props) => {
  const {
    title,
    address,
    tradingPercent,
    interest,
    endTerm,
    financingVolume
  } = assetData
  return (
    <InformationHeaderWrapper>
      <Title>{title}</Title>
      <ShortDescription>
        <Icon iconSrc={locationIcon} />
        {address}
      </ShortDescription>
      <InfoWrapper>
        <TradingPercent>{tradingPercent}%</TradingPercent>
        <ShortDescription>Trading Course</ShortDescription>
      </InfoWrapper>
      <InfoWrapper>
        <SpecsTable>
          <tbody>
            <tr>
              <SpecsCell>
                <SpecsTitle>{interest}%</SpecsTitle>
                <SpecsDetail>Interest p.a.</SpecsDetail>
                <Separator />
              </SpecsCell>
              <SpecsCell>
                <SpecsTitle>{moment(endTerm).format('DD/MM/YY')}</SpecsTitle>
                <SpecsDetail>End of funding</SpecsDetail>
                <Separator />
              </SpecsCell>
              <SpecsCell>
                <SpecsTitle>{monetize(financingVolume)}</SpecsTitle>
                <SpecsDetail>Funding target</SpecsDetail>
              </SpecsCell>
            </tr>
          </tbody>
        </SpecsTable>
      </InfoWrapper>
    </InformationHeaderWrapper>
  )
}

export default InformationHeader
