import * as React from 'react'
import InlineSVG from 'svg-inline-react'
import * as moment from 'moment'
import { Button } from '@drifthq/tide'
import { DomainRowComponentProps } from './interfaces'

import './styles.styl'

const DEFAULT_COMPANY_LOGO = require('!svg-inline-loader?removeTags=true&removeSVGTagAttrs=false!../../../../../img/svg/default-company-logo.svg')

const DomainRow = ({ domain, date, companyLogo, actions: { removeDomainFromMuteList } }: DomainRowComponentProps) => {
  return <tr>
    <td>
      <div className="domain-with-logo">
        {companyLogo ? <img className="company-logo" src={companyLogo} /> : <InlineSVG className="company-logo" src={DEFAULT_COMPANY_LOGO} />}
        <span>{domain}</span>
      </div>
    </td>
    <td>{moment(date).format('MM/DD/YY')}</td>
    <td>{<Button type={'subtle'} size={'small'} onClick={() => removeDomainFromMuteList(domain)}>Remove</Button>}</td>
  </tr>
}

export default DomainRow