import React from "react";
import { PickerModal, SelectOption } from "@/components/PickerModal";

type AppTheme = (typeof THEME_OPTIONS)[number]["value"];

interface ThemeModalProps {
  visible: boolean;
  current: AppTheme;
  onSelect: (theme: AppTheme) => void;
  onClose: () => void;
}

const THEME_OPTIONS = [
  { value: "light", label: "Light" },
  { value: "dark", label: "Dark" },
  { value: "system", label: "System Default" },
] as const;

export function ThemeModal({
  visible,
  current,
  onSelect,
  onClose,
}: ThemeModalProps) {
  return (
    <PickerModal visible={visible} onClose={onClose} title="Appearance">
      {THEME_OPTIONS.map((opt) => (
        <SelectOption
          key={opt.value}
          label={opt.label}
          value={opt.value}
          selected={current === opt.value}
          onSelect={(v) => {
            onSelect(v as "light" | "dark" | "system");
            onClose();
          }}
        />
      ))}
    </PickerModal>
  );
}