brackt/app/components/NotificationSettings.tsx

import { Switch } from "~/components/ui/switch";
import { Label } from "~/components/ui/label";
import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group";
import type { NotificationMode } from "~/hooks/useDraftNotifications";

interface NotificationSettingsProps {
  enabled: boolean;
  onEnabledChange: (enabled: boolean) => void;
  mode: NotificationMode;
  onModeChange: (mode: NotificationMode) => void;
  permissionState: NotificationPermission | "unsupported";
  switchOnly?: boolean;
}

export function NotificationSettings({
  enabled,
  onEnabledChange,
  mode,
  onModeChange,
  permissionState,
  switchOnly = false,
}: NotificationSettingsProps) {
  if (permissionState === "unsupported") {
    return null;
  }

  if (switchOnly) {
    return (
      <>
        <Switch
          aria-label="Enable notifications"
          checked={enabled}
          onCheckedChange={onEnabledChange}
          disabled={permissionState === "denied"}
        />
        {enabled && (
          <div className="absolute top-full right-0 mt-2 bg-card border border-border rounded-lg shadow-lg p-3 z-50 min-w-[180px]">
            <RadioGroup
              value={mode}
              onValueChange={(value) => onModeChange(value as NotificationMode)}
              className="space-y-2"
            >
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="my_turn" id="notif_header_my_turn" />
                <Label htmlFor="notif_header_my_turn" className="text-sm cursor-pointer">
                  My Turn Only
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="all_picks" id="notif_header_all_picks" />
                <Label htmlFor="notif_header_all_picks" className="text-sm cursor-pointer">
                  All Picks
                </Label>
              </div>
            </RadioGroup>
          </div>
        )}
      </>
    );
  }

  return (
    <div>
      <div className="flex items-center justify-between">
        <Label htmlFor="notifications-switch" className="text-sm font-semibold">
          Notifications
        </Label>
        <Switch
          id="notifications-switch"
          checked={enabled}
          onCheckedChange={onEnabledChange}
          disabled={permissionState === "denied"}
        />
      </div>

      {permissionState === "denied" && (
        <p className="text-xs text-muted-foreground mt-2">
          Notifications blocked by browser. Update in browser settings to
          enable.
        </p>
      )}

      {enabled && (
        <RadioGroup
          value={mode}
          onValueChange={(value) => onModeChange(value as NotificationMode)}
          className="space-y-2 mt-3"
        >
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="my_turn" id="notif_my_turn" />
            <Label htmlFor="notif_my_turn" className="text-sm cursor-pointer">
              My Turn Only
            </Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="all_picks" id="notif_all_picks" />
            <Label htmlFor="notif_all_picks" className="text-sm cursor-pointer">
              All Picks
            </Label>
          </div>
        </RadioGroup>
      )}
    </div>
  );
}