import { type FC, type ReactNode } from 'react';
import classNames from 'classnames';

import useTheme from '~/src/hooks/useTheme';

export interface RichTextProps {
  withLinkStyle?: boolean;
  children?: ReactNode;
}

const RichText: FC<RichTextProps> = ({ children, withLinkStyle }) => {
  const theme = useTheme();

  return (
    <div className={classNames('richText', { withLinkStyle })}>
      {children}
      <style jsx>{`
        .richText > :global(*:not(:last-child)) {
          margin-bottom: 25px;
        }

        .richText :global(h1),
        .richText :global(h2),
        .richText :global(h3),
        .richText :global(h4),
        .richText :global(h5) {
          margin-top: 4rem;
          margin-bottom: 1rem !important;
          font-weight: bold;
          letter-spacing: 0.015em;
          line-height: 1.3em;
          color: ${theme.textColor90};
        }

        .richText :global(h2:first-child) {
          margin-top: 0;
        }

        .richText :global(h2) {
          font-size: 2.6rem;
        }

        .richText :global(h3) {
          font-size: 1.9rem;
        }

        .richText :global(p),
        .richText :global(li) {
          font-size: 1.9rem;
          line-height: 1.5em;
          letter-spacing: 0.01em;
          font-weight: 300;
          color: ${theme.textColor80};
        }

        .richText :global(ul),
        .richText :global(ol) {
          margin-left: 0em;
          padding-left: 1.2em;
        }

        .richText :global(ul li) {
          list-style-type: disc;
        }

        .richText :global(ol li) {
          list-style-type: decimal;
        }

        .richText :global(hr) {
          margin: 38px 0;
        }

        .richText.withLinkStyle :global(a:not(.buttonPrimary)) {
          text-decoration: underline;
          cursor: pointer;
          color: #888;
        }

        .richText :global(pre) {
          font-size: 0.8em;
          background: #131313;
          border: solid 1px #333;
          border-radius: 0.3em;
          padding: 0.9em 0.8em;
          overflow: auto;
          color: #ddd;
        }

        .richText :global(pre::-webkit-scrollbar) {
          display: none;
        }
      `}</style>
    </div>
  );
};

export default RichText;