'use client';

import clsx from 'clsx';

interface LiquidHeadingProps {
  text: string;
  className?: string;
  level?: 1 | 2 | 3 | 4;
}

export const LiquidHeading = ({ text, className, level = 1 }: LiquidHeadingProps) => {
  const Tag = `h${level}` as keyof JSX.IntrinsicElements;

  return (
    <Tag className={clsx("font-bold tracking-tight text-stone-800", className)}>
      {text}
    </Tag>
  );
};