import React, { useCallback } from 'react';
import { Divider, Visible, Card } from 'components';
import { Container, StyleSystemThemedProps } from 'components/layout';
import { NewItem } from '../new-item';

export const New: React.FC<StyleSystemThemedProps> = ({ ...props }) => {
  const news = [
    {
      id: 1,
      title: 'Little Big Updates: dispatches from Quality Week of the type',
      body: 'Stories about seemingly-small bugs, and the art of distinguishing the little details from the little-big ones.',
      createdAt: '10 h ago',
    },
    {
      id: 2,
      title: 'Little Big Updates: 32 fixes and features for a better workflow',
      body: 'Stories about seemingly-small bugs, and the art of distinguishing the little details from the little-big ones. to the best wishes',
      createdAt: '12 h ago',
    },
  ];

  const isDivider = useCallback(
    (index: number) => {
      return index < news.length - 1;
    },
    [news.length]
  );

  return (
    <Card colorVariant="base-01" variant="plain" sizeVariant="medium" {...props}>
      {news.map(({ createdAt, id, body, title }, index) => {
        return (
          <Container key={id}>
            <NewItem createdAt={createdAt} title={title} body={body} />
            <Visible if={isDivider(index)}>
              <Divider colorVariant="divider-01" my="s" />
            </Visible>
          </Container>
        );
      })}
    </Card>
  );
};