import React, { useEffect, useState } from 'react';

export function ArticleTextPreview() {
  const [currentSize, setCurrentSize] = useState<string>('small');

  useEffect(() => {
    const updatePreview = () => {
      const root = document.documentElement;
      if (root.classList.contains('text-size-large')) {
        setCurrentSize('large');
      } else if (root.classList.contains('text-size-medium')) {
        setCurrentSize('medium');
      } else {
        setCurrentSize('small');
      }
    };

    updatePreview();

    const observer = new MutationObserver(mutations => {
      mutations.forEach(mutation => {
        if (mutation.attributeName === 'class') {
          updatePreview();
        }
      });
    });

    observer.observe(document.documentElement, { attributes: true });

    return () => observer.disconnect();
  }, []);

  const textSizeClass = (() => {
    switch (currentSize) {
      case 'large':
        return 'text-preview-large';
      case 'medium':
        return 'text-preview-medium';
      default:
        return 'text-preview-small';
    }
  })();

  return (
    <div className="mt-4 border rounded-md overflow-hidden">
      <div className="bg-muted/30 px-4 py-2 border-b flex justify-between items-center">
        <h4 className="font-medium">Article Text Preview</h4>
        <span className="text-xs text-muted-foreground">
          Size:{' '}
          <span className="font-medium">
            {currentSize === 'small' ? 'Small' : currentSize === 'medium' ? 'Medium' : 'Large'}
          </span>
        </span>
      </div>

      <div className="p-4">
        <div className={textSizeClass}>
          <h2 className="font-semibold mb-2 text-preview-heading">Sample Heading</h2>
          <p className="text-muted-foreground mb-3">
            This sample text shows how articles will appear with your selected font size and text
            color.
          </p>
        </div>
      </div>
    </div>
  );
}