import { useEffect } from 'react';

interface Props {
  title: string;
  content?: string;
  loading?: boolean;
}

export default function LegalContentPage({ title, content = '', loading = false }: Props) {
  useEffect(() => {
    document.title = `${title} – HMS Licht & Ton`;
  }, [title]);

  if (loading) {
    return (
      <div className="max-w-3xl mx-auto">
        <div className="space-y-4">
          <div className="hms-skeleton rounded-md" style={{ height: 32, width: '60%' }} />
          <div className="hms-skeleton rounded-md" style={{ height: 20 }} />
          <div className="hms-skeleton rounded-md" style={{ height: 20, width: '90%' }} />
          <div className="hms-skeleton rounded-md" style={{ height: 20 }} />
          <div className="hms-skeleton rounded-md" style={{ height: 20, width: '80%' }} />
        </div>
      </div>
    );
  }

  return (
    <div className="max-w-3xl mx-auto">
      <article>
        <h1 className="text-3xl font-bold text-text mb-6">{title}</h1>
        <div className="prose prose-invert max-w-none text-text-muted" dangerouslySetInnerHTML={{ __html: content }} />
      </article>
    </div>
  );
}