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

export function NotificationsSection({
  active,
  savedDiscordWebhookUrl,
  discordWebhookUrl,
  onDiscordWebhookUrlChange,
}: {
  active: boolean;
  savedDiscordWebhookUrl: string | null;
  discordWebhookUrl: string;
  onDiscordWebhookUrlChange: (v: string) => 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-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>
    </SettingsSection>
  );
}