import { Switch } from "@/components/ui/switch";
import { cn } from "@/lib/utils";

interface NotificationItem {
  id: string;
  title: string;
  description: string;
  enabled: boolean;
}

interface SettingsNotifications2Props {
  heading?: string;
  subHeading?: string;
  className?: string;
  notifications?: NotificationItem[];
}

const SettingsNotifications2 = ({
  heading = "ترجیحات اعلان",
  subHeading = "کانال‌ها و نوع پیام‌هایی که می‌خواهید دریافت کنید را انتخاب کنید.",
  notifications = [
    {
      id: "email-updates",
      title: "به‌روزرسانی ایمیلی",
      description: "ایمیل‌های مهم درباره فعالیت حساب و رویدادهای امنیتی را دریافت کنید.",
      enabled: true,
    },
    {
      id: "push-notifications",
      title: "اعلان پوش",
      description: "هشدارهای فوری لید و تیکت را روی موبایل دریافت کنید.",
      enabled: true,
    },
    {
      id: "weekly-digest",
      title: "گزارش هفتگی",
      description: "خلاصه عملکرد پایپ‌لاین و بینش‌های هفتگی تیم را دریافت کنید.",
      enabled: false,
    },
    {
      id: "marketing-emails",
      title: "اخبار محصول",
      description: "نکات بهره‌وری، قابلیت‌های جدید و پیشنهادهای ویژه را دریافت کنید.",
      enabled: false,
    },
  ],
  className,
}: SettingsNotifications2Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("w-full py-32", className)}>
      <div className="w-full px-4 sm:px-6 lg:px-8">
        <div className="flex w-full flex-col gap-8 tracking-tight">
        <div className="space-y-2">
          <h3 className="text-xl font-semibold">{heading}</h3>
          <p className="font-medium text-muted-foreground">{subHeading}</p>
        </div>

        <div className="divide-y">
          {notifications.map((notification) => (
            <div
              key={notification.id}
              className="flex items-center justify-between gap-4 py-4"
            >
              <div className="space-y-0.5">
                <p className="font-medium">{notification.title}</p>
                <p className="text-sm text-muted-foreground">
                  {notification.description}
                </p>
              </div>
              <Switch defaultChecked={notification.enabled} />
            </div>
          ))}
        </div>
        </div>
      </div>
    </section>
  );
};

export { SettingsNotifications2 };