import { Switch } from "~/components/ui/switch";
import { Label } from "~/components/ui/label";

interface NotificationSettingsProps {
  enabled: boolean;
  onEnabledChange: (enabled: boolean) => void;
  isSupported: boolean;
  permissionState: NotificationPermission | "unsupported";
}

export function NotificationSettings({
  enabled,
  onEnabledChange,
  isSupported,
  permissionState,
}: NotificationSettingsProps) {
  if (!isSupported) {
    return null;
  }

  return (
    <div className="border-t pt-4 mt-4">
      <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>
      )}
    </div>
  );
}