import classNames from 'classnames';
import { ReactNode } from 'react';

type TextAlignProps = 'start' | 'center' | 'end' | 'justify';

type SegmentProps = {
  id?: string;
  color?: string;
  colorWeight?: number;
  borderWeight?: number;
  textAlign?: TextAlignProps;
  padded?: boolean;
  dataTestId?: string;
  children?: ReactNode;
  className?: string;
};

function Segment({
  id,
  color = 'gray',
  colorWeight = 300,
  borderWeight = 1,
  textAlign = 'start',
  padded = false,
  dataTestId,
  children,
  className
}: SegmentProps) {
  return (
    <div
      id={id}
      data-testid={dataTestId}
      className={classNames(
        'm-4 overflow-y-auto p-4',
        { 'sm:p-8': padded },
        'rounded-md border-2 shadow-sm',
        getBorderClass(borderWeight, color, colorWeight),
        getTextAlignClass(textAlign),
        className
      )}
    >
      {children}
    </div>
  );
}

function getTextAlignClass(textAlign: TextAlignProps) {
  return `text-${textAlign}`;
}

function getBorderClass(borderWeight: number, color: string, colorWeight: number) {
  const borderClass = borderWeight === 1 ? 'border' : `border-${borderWeight}`;
  const borderColorClass = `border-${color}-${colorWeight}`;
  return `${borderClass} ${borderColorClass}`;
}

export default Segment;
