<commit_before>import React from 'react'
import styled from 'styled-components'
import { GREY_3 } from 'govuk-colours'
import { format, parseISO } from 'date-fns'
import { SPACING, FONT_SIZE, FONT_WEIGHTS } from '@govuk-react/constants'

import { companies, interactions } from '../../../lib/urls'

const StyledDiv = styled('div')`
  background-color: ${GREY_3};
  padding: 9px ${SPACING.SCALE_2} 8px ${SPACING.SCALE_2};
`

const StyledHeader = styled('h3')`
  font-size: ${FONT_SIZE.SIZE_16};
  font-weight: ${FONT_WEIGHTS.bold};
  margin-bottom: 0;
`

const StyledList = styled('ul')`
  font-size: ${FONT_SIZE.SIZE_16};
`
const StyledSpan = styled('span')`
  /* This color is not in gov-react but is in the GDS design system */
  color: #505a5f;
`

const InvestmentDetails = ({
  investor,
  sector,
  countryOrigin,
  latestInteraction,
}) => (
  <StyledDiv data-test="investment-details">
    <StyledHeader>Details</StyledHeader>
    <StyledList>
      <li>
        <StyledSpan>Investor: </StyledSpan>
        <a href={companies.details(investor.id)}>{investor.name}</a>
      </li>
      <li>
        <StyledSpan>Sector: </StyledSpan>
        {sector.name}
      </li>
      {countryOrigin && (
        <li>
          <StyledSpan>Country of origin: </StyledSpan>
          {countryOrigin.name}
        </li>
      )}
      {latestInteraction && (
        <>
          <li>
            <StyledSpan>Last interaction: </StyledSpan>
            {format(new Date(parseISO(latestInteraction.date)), 'd MMM yyyy')}
          </li>
          <li>
            <StyledSpan>Interaction subject: </StyledSpan>
            <a href={interactions.detail(latestInteraction.id)}>
              {latestInteraction.subject}
            </a>
          </li>
        </>
      )}
    </StyledList>
  </StyledDiv>
)

export default InvestmentDetails<commit_msg>Use date utils for formatting date and time<commit_after>import React from 'react'
import styled from 'styled-components'
import { GREY_3 } from 'govuk-colours'
import { SPACING, FONT_SIZE, FONT_WEIGHTS } from '@govuk-react/constants'

import { companies, interactions } from '../../../lib/urls'
import { format } from '../../utils/date-utils'

const StyledDiv = styled('div')`
  background-color: ${GREY_3};
  padding: 9px ${SPACING.SCALE_2} 8px ${SPACING.SCALE_2};
`

const StyledHeader = styled('h3')`
  font-size: ${FONT_SIZE.SIZE_16};
  font-weight: ${FONT_WEIGHTS.bold};
  margin-bottom: 0;
`

const StyledList = styled('ul')`
  font-size: ${FONT_SIZE.SIZE_16};
`
const StyledSpan = styled('span')`
  /* This color is not in gov-react but is in the GDS design system */
  color: #505a5f;
`

const InvestmentDetails = ({
  investor,
  sector,
  countryOrigin,
  latestInteraction,
}) => (
  <StyledDiv data-test="investment-details">
    <StyledHeader>Details</StyledHeader>
    <StyledList>
      <li>
        <StyledSpan>Investor: </StyledSpan>
        <a href={companies.details(investor.id)}>{investor.name}</a>
      </li>
      <li>
        <StyledSpan>Sector: </StyledSpan>
        {sector.name}
      </li>
      {countryOrigin && (
        <li>
          <StyledSpan>Country of origin: </StyledSpan>
          {countryOrigin.name}
        </li>
      )}
      {latestInteraction && (
        <>
          <li>
            <StyledSpan>Last interaction: </StyledSpan>
            {format(latestInteraction.date)}
          </li>
          <li>
            <StyledSpan>Interaction subject: </StyledSpan>
            <a href={interactions.detail(latestInteraction.id)}>
              {latestInteraction.subject}
            </a>
          </li>
        </>
      )}
    </StyledList>
  </StyledDiv>
)

export default InvestmentDetails
{'fraction_non_alphanumeric': 0.147234273318872, 'fraction_numerical': 0.008676789587852495, 'mean_word_length': 2.638067061143984, 'pattern_counts': {'":': 0, '<': 67, '<?xml version=': 0, '>': 69, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6987091', 'n_tokens_mistral': 1314, 'n_tokens_neox': 1234, 'n_words': 249}