import { h, type FunctionComponent } from 'preact'
import { useEffect, useState } from 'preact/hooks'
import rek from 'rek'
import { Table, Td } from './table.tsx'

const GitLog: FunctionComponent = () => {
  const [commits, setCommits] = useState<ANY[] | null>(null)

  useEffect(() => {
    rek('/api/git-log').then(setCommits)
  }, [])

  return (
    commits && (
      <Table>
        <tbody>
          {commits.map((commit) => (
            <tr key={commit.hash}>
              <Td minimize>{new Date(commit.date).toLocaleString('sv-SE')}</Td>
              <Td minimize>{commit.author}</Td>
              <Td>{commit.message}</Td>
              <Td>
                (
                <a target='_blank' href={`https://github.com/tlth/new_fmval/commit/${commit.hash}`} rel='noreferrer'>
                  {commit.hash.slice(0, 6)}
                </a>
                )
              </Td>
            </tr>
          ))}
        </tbody>
      </Table>
    )
  )
}

export default GitLog