import type { FC } from 'react';

import Sticky from '~/src/components/Sticky';
import Text from '~/src/components/Text';
import { toRgba } from '~/src/lib/utils/color';
import { usePageTheme } from '../../hooks/theme';

const SectionTitle: FC<{
  text: string | undefined;
  margin?: string;
  padding?: string;
  minHeight?: string | number;
  isSticky?: boolean;
}> = ({ text, minHeight, isSticky = false, ...textProps }) => {
  const pageTheme = usePageTheme();

  return (
    <Sticky
      style={{ minHeight }}
      zIndex={isSticky ? 3 : undefined}
      top="2rem"
      isEnabled={isSticky}
    >
      {text && (
        <Text
          tag="h2"
          size="1.95rem"
          family={pageTheme.fontFamily}
          centered
          margin="-0.02em 0 0"
          color={toRgba(pageTheme.customFontColor ?? pageTheme.textColor, 0.8)}
          shadow={`0 0.01em 0.15em ${toRgba(pageTheme.backgroundColor, 0.6)}`}
          style={{
            userSelect: 'none',
          }}
          {...textProps}
        >
          {text}
        </Text>
      )}
    </Sticky>
  );
};

export default SectionTitle;