import { type FC } from 'react';

import HuList from '@material-hu/components/design-system/List';
import HuListItem from '@material-hu/components/design-system/List/components/ListItem';

import { type PanelMode, type SearchResult } from '../../types';
import PlaceholderState from '../PlaceholderState';
import ResultRow from '../ResultRow';

type ResultsContentProps = {
  mode: PanelMode;
  results: SearchResult[];
  onResultClick: () => void;
};

const SKELETON_ROWS = 5;

const ResultsContent: FC<ResultsContentProps> = ({
  mode,
  results,
  onResultClick,
}) => {
  if (mode === 'empty' || mode === 'no-results' || mode === 'error') {
    return <PlaceholderState variant={mode} />;
  }

  if (mode === 'loading') {
    return (
      <HuList>
        {Array.from({ length: SKELETON_ROWS }).map((_, index) => (
          <HuListItem
            key={index}
            loading
          />
        ))}
      </HuList>
    );
  }

  return (
    <HuList>
      {results.map(item => (
        <ResultRow
          key={item.id}
          result={item}
          onSelect={onResultClick}
        />
      ))}
    </HuList>
  );
};

export default ResultsContent;
