import { PanelSectionRow } from "@decky/ui";
import { MESSAGES, STYLES } from "../utils/constants";

interface InstructionCardProps {
  pathExists: boolean | null;
}

export function InstructionCard({ pathExists }: InstructionCardProps) {
  if (pathExists !== true) return null;

  return (
    <PanelSectionRow>
      <div style={STYLES.instructionCard}>
        <div style={{ fontWeight: "bold", marginBottom: "8px", color: "var(--decky-accent-text)" }}>
          {MESSAGES.instructionTitle}
        </div>
        <div style={{ whiteSpace: "pre-line" }}>{MESSAGES.instructionText}</div>
      </div>
    </PanelSectionRow>
  );
}
