import React from 'react';
import { theme } from '../../app/theme';
import { SBox } from '../../common/s-components/layout/s-box';
import { SRow } from '../../common/s-components/layout/s-row';
import { SPopupSelectorItem } from '../../common/s-components/popup-selector/s-popup-selector-item';
import { SH6 } from '../../common/s-components/typography/s-h6';
import { CategoryPill } from './category-pill';
import { NSelect } from '../../common/types';

type TProps = {
  categories: NSelect.TOption[];
  value: string;
  setValue: (value: any) => void;
};

export const OwnerInfo: React.FC<TProps> = props => {
  const { categories, value, setValue } = props;
  return (
    <SBox mr={-14} mt={1}>
      <SPopupSelectorItem pb={21} borderColor="transparent">
        <SH6 color={theme.colors.romanPurple}>owner category</SH6>
      </SPopupSelectorItem>
      <SRow flexWrap="wrap" mb={8}>
        {categories.map(({ label, value: itemValue }) => (
          <CategoryPill
            key={itemValue}
            label={label}
            value={itemValue}
            active={value === itemValue}
            onCategoryChange={setValue}
          />
        ))}
      </SRow>
    </SBox>
  );
};