import React, { ReactNode, FC } from 'react';
import classnames from 'classnames';
import './ShopLinks.scss';

interface Props {
  className?: string;
  title?: string;
  children: ReactNode;
  forwardedRef: React.Ref<HTMLDivElement>;
}

const __ShopLinks__: FC<Props> = ({
  className = '',
  title = '',
  children,
  forwardedRef,
}) => {
  return (
    <div
      className={classnames('mo-display-shop-links', {
        [className]: className !== '',
      })}
      ref={forwardedRef}
    >
      {title && <div className="mo-display-shop-links__title">{title}</div>}
      {children}
    </div>
  );
};

export const ShopLinks = React.forwardRef(
  (props: Props, ref: React.Ref<HTMLDivElement>) => (
    <__ShopLinks__ {...props} forwardedRef={ref} />
  ),
);

ShopLinks.displayName = 'ShopLinks';