'use strict';

import React from 'react';

import { Button, HStack } from 'soapbox/components/ui';
import { useSettings } from 'soapbox/hooks';

interface IPinnedHostsPicker {
  /** The active host among pinned hosts. */
  host: string,
}

const PinnedHostsPicker: React.FC<IPinnedHostsPicker> = ({ host: activeHost }) => {
  const settings = useSettings();
  const pinnedHosts = settings.getIn(['remote_timeline', 'pinnedHosts']) as any;

  if (!pinnedHosts || pinnedHosts.isEmpty()) return null;

  return (
    <HStack className='mb-4' space={2}>
      {pinnedHosts.map((host: any) => (
        <Button
          key={host}
          to={`/timeline/${host}`}
          size='sm'
          theme={host === activeHost ? 'accent' : 'secondary'}
        >
          {host}
        </Button>
      ))}
    </HStack>
  );
};

export default PinnedHostsPicker;