import React, { forwardRef } from 'react';
import * as css from './StreamHeader.css';

type SegmentProps = {
  active: boolean;
  disabled?: boolean;
  label: string;
  onClick?: () => void;
};

// Tab segment for the StreamHeader row. Active state is communicated
// by a violet dot (folds `Primary.Main`) and a heavier font weight.
export const Segment = forwardRef<HTMLButtonElement, SegmentProps>(
  ({ active, disabled, label, onClick }, ref) => (
    <button
      ref={ref}
      type="button"
      onClick={disabled ? undefined : onClick}
      aria-pressed={active}
      aria-disabled={disabled || undefined}
      className={css.segment({ active, disabled })}
    >
      <span aria-hidden className={css.segmentDot({ active })} />
      {label}
    </button>
  )
);
Segment.displayName = 'Segment';