interface BlogHeadingProps {
  id: string;
  level: 2 | 3;
  children: React.ReactNode;
}

export const BlogHeading = ({ id, level, children }: BlogHeadingProps) => {
  const Tag = `h${level}` as const;

  const baseStyles = 'scroll-mt-28 text-gray-900 font-bold tracking-tight';
  const levelStyles = {
    2: 'text-2xl mt-12 mb-4 first:mt-0',
    3: 'text-xl mt-8 mb-3',
  };

  return (
    <Tag id={id} className={`${baseStyles} ${levelStyles[level]}`}>
      {children}
    </Tag>
  );
};
