brackt/app/components/league/settings/NotificationsSection.tsx

import { Bell } from "lucide-react";
import { Input } from "~/components/ui/input";
import { Label } from "~/components/ui/label";
import { Switch } from "~/components/ui/switch";
import { SettingsSection, SettingsStatusPill } from "./SettingsSection";

export function NotificationsSection({
  active,
  savedDiscordWebhookUrl,
  discordWebhookUrl,
  onDiscordWebhookUrlChange,
  discordPicksAnnouncementEnabled,
  onDiscordPicksAnnouncementEnabledChange,
}: {
  active: boolean;
  savedDiscordWebhookUrl: string | null;
  discordWebhookUrl: string;
  onDiscordWebhookUrlChange: (v: string) => void;
  discordPicksAnnouncementEnabled: boolean;
  onDiscordPicksAnnouncementEnabledChange: (v: boolean) => void;
}) {
  return (
    <SettingsSection
      id="notifications"
      icon={Bell}
      title="Notifications"
      description="Send Discord alerts when standings change after scoring events."
      status={<SettingsStatusPill tone={savedDiscordWebhookUrl ? "success" : "warning"}>{savedDiscordWebhookUrl ? "Configured" : "Optional"}</SettingsStatusPill>}
      className={active ? undefined : "hidden"}
    >
      <div className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="discordWebhookUrl">Discord Webhook URL</Label>
          <Input
            id="discordWebhookUrl"
            name="discordWebhookUrl"
            type="url"
            value={discordWebhookUrl}
            onChange={(e) => onDiscordWebhookUrlChange(e.target.value)}
            placeholder="https://discord.com/api/webhooks/..."
          />
          <p className="text-sm text-muted-foreground">
            Create a webhook in Discord under Server Settings, Integrations, Webhooks.
          </p>
        </div>
        {savedDiscordWebhookUrl && (
          <div className="flex items-center gap-3">
            <Switch
              id="discordPicksAnnouncementEnabled"
              name="discordPicksAnnouncementEnabled"
              checked={discordPicksAnnouncementEnabled}
              onCheckedChange={onDiscordPicksAnnouncementEnabledChange}
            />
            <div>
              <Label htmlFor="discordPicksAnnouncementEnabled" className="cursor-pointer">
                Announce draft picks
              </Label>
              <p className="text-sm text-muted-foreground">
                Post a message for each pick and ping the next team's owner if they've enabled Discord notifications.
              </p>
            </div>
          </div>
        )}
      </div>
    </SettingsSection>
  );
}