/* eslint-disable @typescript-eslint/ban-ts-comment */
// @ts-nocheck
import React from 'react';
import { StyleSystemThemedProps, Container } from 'components/layout';
import { ColorName } from '@emotion/react';

export const Divider: React.FC<DividerType> = ({
  size = 1.1,
  directionVariant = 'horizontal',
  colorVariant,
  ...props
}) => {
  // TODO: investigate why <1.1 cause issue with styles system
  const lineSize = size < 1.1 ? 1.1 : size;
  const flexGrow = directionVariant === 'horizontal' ? 1 : 0;
  const alignSelf = directionVariant === 'vertical' ? 'stretch' : 'auto';
  const height = directionVariant === 'horizontal' ? lineSize : 'auto';
  const width = directionVariant === 'horizontal' ? 'auto' : lineSize;
  return (
    <Container
      flexGrow={flexGrow}
      alignSelf={alignSelf}
      height={height}
      width={width}
      backgroundColor={colorVariant as ColorName}
      {...props}
    />
  );
};

type DividerType = StyleSystemThemedProps & DividerProps;
type DividerDirection = 'vertical' | 'horizontal';
type DividerColorVariant = 'divider' | 'divider-01' | 'divider-02';

export interface DividerProps {
  directionVariant?: DividerDirection;
  colorVariant: DividerColorVariant;
  size?: number;
}