import { VOCAB } from "@paperclipai/branding";
import { SettingsSection, SettingsRow } from "./SettingsSection";

const NEXUS_VERSION = "1.7-dev";

export function AboutSection() {
  return (
    <SettingsSection title="About">
      <SettingsRow label="Version">
        <span className="font-mono text-xs text-muted-foreground">
          {VOCAB.appName} {NEXUS_VERSION}
        </span>
      </SettingsRow>
      <SettingsRow label="Fork of">
        <span className="font-mono text-xs text-muted-foreground">Paperclip</span>
      </SettingsRow>
      <SettingsRow label="License">
        <a
          href="https://opensource.org/license/mit"
          target="_blank"
          rel="noreferrer"
          className="text-xs text-muted-foreground underline underline-offset-4 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
        >
          MIT
        </a>
      </SettingsRow>
      <SettingsRow label="Source">
        <a
          href="https://github.com/paperclip-ai/paperclip"
          target="_blank"
          rel="noreferrer"
          className="text-xs text-muted-foreground underline underline-offset-4 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
        >
          github.com/paperclip-ai/paperclip
        </a>
      </SettingsRow>
    </SettingsSection>
  );
}