import React from 'react';
import styled, { css } from 'styled-components';

interface Props {
  options: string[];
  selected?: string;
  onSelect: (option: number) => void;
  useIndex?: boolean;
}
function DatePickerHeaderDropdown({
  options,
  selected,
  useIndex,
  onSelect,
}: Props) {
  return (
    <Container>
      {options.map((option, index) => (
        <Option
          key={option}
          onClick={() => {
            if (useIndex) {
              onSelect(index);
            } else {
              onSelect((option as any) as number);
            }
          }}
          $selected={selected === option}
        >
          {option}
        </Option>
      ))}
    </Container>
  );
}

const SelectedStyle = css`
  background: rgba(117, 133, 136, 0.15);
  font-weight: bold;
`;

const Option = styled.div<{ $selected: boolean }>`
  padding: 10px;
  font-size: 15px;
  color: #3a3630;

  ${props => props.$selected && SelectedStyle};
`;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  text-align: left;
  max-height: 325px;
  border-radius: 6px;
  background: white;
  padding: 5px;
  position: absolute;
  overflow: auto;
  width: 185px;
  z-index: 10;
  top: 50px;
`;
export default DatePickerHeaderDropdown;
