import { useQuery } from '@tanstack/react-query';
import { gdprApi } from '../../services/api';
import Card from '../../components/ui/Card';
import { Building } from 'lucide-react';

export default function PortalImprint() {
  const { data, isLoading, isError } = useQuery({
    queryKey: ['imprint'],
    queryFn: () => gdprApi.getImprint(),
    retry: 1,
  });

  if (isLoading) return <div className="text-center py-8 text-gray-500">Laden...</div>;
  if (isError) return <div className="text-center py-8 text-red-500">Impressum konnte nicht geladen werden. Bitte Server neu starten.</div>;

  const html = data?.data?.html || '<p class="text-gray-500">Noch kein Impressum hinterlegt.</p>';

  return (
    <div>
      <div className="flex items-center gap-3 mb-6">
        <Building className="w-6 h-6 text-blue-600" />
        <h1 className="text-2xl font-bold">Impressum</h1>
      </div>
      <Card>
        <div className="prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: html }} />
      </Card>
    </div>
  );
}