import React from 'react';
import styled from 'styled-components';
import { uiFonts } from '../constants/uiFonts';
import { Dropdown } from './Dropdown';

interface IDropdownSelectorOption {
  id: string;
  name: string;
}

export interface IDropdownSelectorContainer {
  onChange: (id: string) => void;
  options: IDropdownSelectorOption[];
  details?: string;
  title: string;
}

export const DropdownSelectorContainer: React.FC<IDropdownSelectorContainer> = ({
  title,
  onChange,
  options,
  details,
}) => {
  return (
    <div>
      <p>{title}</p>
      <Dropdown
        options={options.map((option, index) => ({
          option: option.name,
          value: option.id,
          id: index,
        }))}
        onChange={onChange}
      />
      <Details>{details}</Details>
    </div>
  );
};

const Details = styled.p`
  font-size: ${uiFonts.size.xsmall} !important;
`;
