import { Flexbox } from '@lobehub/ui';
import qs from 'query-string';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import urlJoin from 'url-join';

import WorkspaceLink from '@/features/Workspace/WorkspaceLink';

import Title from '../../../../../features/Title';
import { useDetailContext } from '../../DetailProvider';
import Item from './Item';

const Related = memo(() => {
  const { t } = useTranslation('discover');
  const { models = [], identifier } = useDetailContext();

  return (
    <Flexbox gap={16}>
      <Title
        more={t('models.details.related.more')}
        moreLink={qs.stringifyUrl({
          query: {
            category: identifier,
          },
          url: '/community/model',
        })}
      >
        {t('models.details.related.listTitle')}
      </Title>
      <Flexbox gap={8}>
        {models?.slice(0, 6)?.map((item, index) => {
          const link = urlJoin('/community/model', item.id);
          return (
            <WorkspaceLink key={index} style={{ color: 'inherit', overflow: 'hidden' }} to={link}>
              <Item {...item} />
            </WorkspaceLink>
          );
        })}
      </Flexbox>
    </Flexbox>
  );
});

export default Related;
