"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Button } from "@/components/ui/button"
import { toast } from "sonner"

const notifications = [
  {
    id: "lead-assigned",
    title: "Lead Assigned",
    description: "When a lead is assigned to you",
    defaultChecked: true,
  },
  {
    id: "lead-status",
    title: "Status Changes",
    description: "When a lead's status is updated",
    defaultChecked: true,
  },
  {
    id: "note-added",
    title: "Note Added",
    description: "When a note is added to your lead",
    defaultChecked: false,
  },
  {
    id: "daily-digest",
    title: "Daily Digest",
    description: "Receive a daily summary of lead activity",
    defaultChecked: false,
  },
  {
    id: "weekly-report",
    title: "Weekly Report",
    description: "Receive a weekly performance report",
    defaultChecked: true,
  },
]

export function NotificationSettings() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Notification Settings</CardTitle>
        <CardDescription>
          Configure which notifications you want to receive.
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-0">
        {notifications.map((n, i) => (
          <div
            key={n.id}
            className={`flex items-center justify-between py-4 ${i < notifications.length - 1 ? "border-b" : ""}`}
          >
            <div className="space-y-0.5">
              <Label htmlFor={n.id} className="text-sm font-medium">
                {n.title}
              </Label>
              <p className="text-sm text-muted-foreground">{n.description}</p>
            </div>
            <Switch id={n.id} defaultChecked={n.defaultChecked} />
          </div>
        ))}
        <div className="flex justify-end pt-4">
          <Button onClick={() => toast.success("Notification preferences saved")}>Save Preferences</Button>
        </div>
      </CardContent>
    </Card>
  )
}