import * as React from 'react';
import Link from 'next/link';
import { DateTime } from './DateTime';

export function ListItem({
  title,
  dateTime,
  tags,
  titleLinkTo,
}: {
  title: string;
  dateTime: string;
  tags: Array<{ name: string; id: string }>;
  titleLinkTo: string;
}) {
  return (
    <div>
      <Link href={titleLinkTo} key={title}>
        <a>
          <h4 style={{ marginBottom: '.5rem' }}>{title}</h4>
        </a>
      </Link>

      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          flexWrap: 'wrap',
        }}
      >
        <DateTime
          date={dateTime}
          style={{ marginRight: '2rem', fontSize: '0.75rem' }}
        />
        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
          {tags.map((tag) => (
            <kbd style={{ marginRight: '0.5rem', fontSize: '0.75rem' }}>
              {tag.name}
            </kbd>
          ))}
        </div>
      </div>
    </div>
  );
}