import { Text } from "@fluentui/react-components";
import { useCommonSectionStyles } from "../../components/commonStyles";
import type { Jail } from "../../types/jail";
import { CodeList } from "./CodeList";

interface PatternsSectionProps {
  jail: Jail;
}

export function PatternsSection({ jail }: PatternsSectionProps): React.JSX.Element {
  const sectionStyles = useCommonSectionStyles();

  return (
    <div className={sectionStyles.section}>
      <div className={sectionStyles.sectionHeader}>
        <Text as="h2" size={500} weight="semibold">
          Log Paths &amp; Patterns
        </Text>
      </div>

      <Text size={300} weight="semibold">
        Log Paths
      </Text>
      <CodeList items={jail.log_paths} empty="No log paths configured." />

      <Text size={300} weight="semibold" style={{ marginTop: "var(--spacingVerticalS)" }}>
        Fail Regex
      </Text>
      <CodeList items={jail.fail_regex} empty="No fail-regex patterns." />

      <Text size={300} weight="semibold" style={{ marginTop: "var(--spacingVerticalS)" }}>
        Ignore Regex
      </Text>
      <CodeList items={jail.ignore_regex} empty="No ignore-regex patterns." />

      {jail.actions.length > 0 && (
        <>
          <Text size={300} weight="semibold" style={{ marginTop: "var(--spacingVerticalS)" }}>
            Actions
          </Text>
          <CodeList items={jail.actions} empty="" />
        </>
      )}
    </div>
  );
}
