import React from "react";
import { ScrollView, Text, useWindowDimensions, View } from "react-native";
import { Dialog } from "./dialog";
import { EntropyByline } from "./entropy-mark";

export interface LegalDialogProps {
  visible: boolean;
  onClose: () => void;
  /** e.g. "Terms of Service" / "Privacy Policy". */
  title: string;
  /** Body copy. Split into paragraphs on blank lines. App-supplied so each
   * app customises the wording; the dialog itself is themed by the palette. */
  content?: string;
}

/**
 * Reusable legal popup (Terms / Privacy / etc). A scrollable dialog instead
 * of a dedicated route — apps pass their own `content` and inherit the
 * active theme. Built on the shared `Dialog`.
 */
export function LegalDialog({ visible, onClose, title, content }: LegalDialogProps) {
  const { height } = useWindowDimensions();
  const paragraphs = (content ?? `${title} for this application.`)
    .trim()
    .split(/\n{2,}/)
    .map((p) => p.trim())
    .filter(Boolean);

  return (
    <Dialog visible={visible} onClose={onClose} title={title} maxWidth={560} draggable>
      <ScrollView style={{ maxHeight: height * 0.6 }} showsVerticalScrollIndicator={false}>
        <View style={{ gap: 12, paddingBottom: 4 }}>
          {paragraphs.map((p, i) => (
            <Text key={i} className="text-sm leading-5 text-muted-foreground dark:text-neutral-400">
              {p}
            </Text>
          ))}
          <View style={{ marginTop: 16 }}>
            <EntropyByline size={16} />
          </View>
        </View>
      </ScrollView>
    </Dialog>
  );
}

export default LegalDialog;