import React from 'react';
import { Box } from '@wix/design-system';
import { ArchivedItemsListItem } from './ArchivedItemsListItem';
import type { ArchivedItem } from './types';

export interface ArchivedItemsListProps {
  items: ArchivedItem[];
  onRestore: (item: ArchivedItem) => void;
  onDelete: (item: ArchivedItem) => void;
  dataHook?: string;
}

export function _ArchivedItemsList({
  items,
  onRestore,
  onDelete,
  dataHook = 'custom-columns',
}: ArchivedItemsListProps) {
  return (
    <Box
      direction="vertical"
      dataHook={`${dataHook}-archived-items-list`}
      backgroundColor="D60"
    >
      {items.map((item, index) => (
        <ArchivedItemsListItem
          key={item.id}
          item={item}
          showDivider={index < items.length - 1}
          onRestore={onRestore}
          onDelete={onDelete}
          dataHook={dataHook}
        />
      ))}
    </Box>
  );
}

export const ArchivedItemsList = _ArchivedItemsList;