import React from 'react';
import styled from 'styled-components';

interface IDividerProps {
  className?: string;
  margin?: string;
}

export const Divider: React.FC<IDividerProps> = ({
  className,
  margin = '4px 0',
}) => {
  return <DividerLine className={className} margin={margin} />;
};

const DividerLine = styled.div<{ margin: string }>`
  width: 100%;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.1) 20%,
    rgba(255, 255, 255, 0.1) 80%,
    transparent
  );
  margin: ${({ margin }) => margin};
`;
