import { formatDate } from 'date-fns'

type PublishDetailsProps = {
  published_at: number
  edited_at: number
  site: string
}

export const PublishDetails = ({
  published_at,
  edited_at,
  site
}: PublishDetailsProps) => {
  return (
    <div className='IBMSMSplitMainBigSideSec'>
      <div className='IBMSMSMBSSPost_PostDetails'>
        <div
          data-bs-toggle='tooltip'
          data-bs-placement='left'
          className='IBMSMSMBSSPost_PDElement'
          title='Publish date'
        >
          <svg
            xmlns='http://www.w3.org/2000/svg'
            viewBox='0 0 512 512'
            width='1em'
            height='1em'
            fill='currentColor'
            className='IBMSMSMBSSPost_PDElementIcon'
            data-bs-toggle='tooltip'
            data-bss-tooltip
            aria-label='Publish date'
          >
            <path d='M480 32H128C110.3 32 96 46.33 96 64v336C96 408.8 88.84 416 80 416S64 408.8 64 400V96H32C14.33 96 0 110.3 0 128v288c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V64C512 46.33 497.7 32 480 32zM272 416h-96C167.2 416 160 408.8 160 400C160 391.2 167.2 384 176 384h96c8.836 0 16 7.162 16 16C288 408.8 280.8 416 272 416zM272 320h-96C167.2 320 160 312.8 160 304C160 295.2 167.2 288 176 288h96C280.8 288 288 295.2 288 304C288 312.8 280.8 320 272 320zM432 416h-96c-8.836 0-16-7.164-16-16c0-8.838 7.164-16 16-16h96c8.836 0 16 7.162 16 16C448 408.8 440.8 416 432 416zM432 320h-96C327.2 320 320 312.8 320 304C320 295.2 327.2 288 336 288h96C440.8 288 448 295.2 448 304C448 312.8 440.8 320 432 320zM448 208C448 216.8 440.8 224 432 224h-256C167.2 224 160 216.8 160 208v-96C160 103.2 167.2 96 176 96h256C440.8 96 448 103.2 448 112V208z' />
          </svg>
          <p className='IBMSMSMBSSPost_PDElementText'>
            {formatDate(
              (published_at !== -1 ? published_at : edited_at) * 1000,
              'dd/MM/yyyy hh:mm:ss aa'
            )}
          </p>
        </div>
        <div
          data-bs-toggle='tooltip'
          data-bs-placement='left'
          className='IBMSMSMBSSPost_PDElement'
          title='Last modified'
        >
          <svg
            xmlns='http://www.w3.org/2000/svg'
            viewBox='0 0 512 512'
            width='1em'
            height='1em'
            fill='currentColor'
            className='IBMSMSMBSSPost_PDElementIcon'
          >
            <path d='M362.7 19.32C387.7-5.678 428.3-5.678 453.3 19.32L492.7 58.75C517.7 83.74 517.7 124.3 492.7 149.3L444.3 197.7L314.3 67.72L362.7 19.32zM421.7 220.3L188.5 453.4C178.1 463.8 165.2 471.5 151.1 475.6L30.77 511C22.35 513.5 13.24 511.2 7.03 504.1C.8198 498.8-1.502 489.7 .976 481.2L36.37 360.9C40.53 346.8 48.16 333.9 58.57 323.5L291.7 90.34L421.7 220.3z' />
          </svg>
          <p className='IBMSMSMBSSPost_PDElementText'>
            {formatDate(edited_at * 1000, 'dd/MM/yyyy hh:mm:ss aa')}
          </p>
        </div>
        <a
          data-bs-toggle='tooltip'
          data-bs-placement='left'
          className='IBMSMSMBSSPost_PDElement IBMSMSMBSSPost_PDElementLink'
          href='#'
          title='Published on'
          target='_blank'
        >
          <svg
            xmlns='http://www.w3.org/2000/svg'
            viewBox='0 -64 640 640'
            width='1em'
            height='1em'
            fill='currentColor'
            className='IBMSMSMBSSPost_PDElementIcon'
          >
            <path d='M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z' />
          </svg>
          <p className='IBMSMSMBSSPost_PDElementText'>{site}</p>
        </a>
      </div>
    </div>
  )
}