'use client';

import { useEffect, useState } from 'react';

interface WikiContentProps {
  html: string;
}

export function WikiContent({ html }: WikiContentProps) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return (
      <div className="animate-pulse space-y-4">
        <div className="h-4 bg-muted rounded w-full" />
        <div className="h-4 bg-muted rounded w-5/6" />
        <div className="h-4 bg-muted rounded w-4/6" />
        <div className="h-4 bg-muted rounded w-full" />
        <div className="h-4 bg-muted rounded w-3/6" />
      </div>
    );
  }

  return (
    <div
      className="wiki-content"
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
}