import Clickable from '~/src/components/Clickable';

type SegmentedControlProps<T extends string> = {
  value: T;
  options: { value: T; label: string }[];
  onChange(value: T): void;
};

export const SegmentedControl = <T extends string>({
  value,
  options,
  onChange,
}: SegmentedControlProps<T>) => {
  return (
    <div className="segmentedControl" data-testid="segmentedControl">
      {options.map((option) => {
        const isActive = option.value === value;

        return (
          <Clickable
            key={option.value}
            isInline
            centerContent
            onClick={() => onChange(option.value)}
            testId={`segment-${option.value}`}
            withHoverOpacityFrom={isActive ? 1 : 0.7}
            padding="0.5rem 1.3rem"
            height="3rem"
            style={{
              borderRadius: '100px',
              background: isActive ? '#444' : undefined,
              color: isActive ? '#fff' : '#999',
              fontSize: '1.3rem',
              fontWeight: 500,
              whiteSpace: 'nowrap',
              transition: 'background 0.15s, color 0.15s',
            }}
          >
            {option.label}
          </Clickable>
        );
      })}
      <style jsx>{`
        .segmentedControl {
          display: inline-flex;
          align-items: center;
          border: 1px solid #444;
          border-radius: 100px;
          overflow: hidden;
        }
      `}</style>
    </div>
  );
};