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

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

interface NotificationCategory {
  id: string;
  title: string;
  notifications: NotificationItem[];
}

interface SettingsNotifications3Props {
  heading?: string;
  subHeading?: string;
  className?: string;
  categories?: NotificationCategory[];
}

const SettingsNotifications3 = ({
  heading = "اعلان‌ها",
  subHeading = "نحوه دریافت اعلان‌ها در بخش‌های مختلف را مدیریت کنید.",
  categories = [
    {
      id: "activity",
      title: "فعالیت",
      notifications: [
        {
          id: "comments",
          title: "نظرات",
          description: "وقتی کسی روی پست‌های شما نظر می‌گذارد یا به شما پاسخ می‌دهد.",
          enabled: true,
        },
        {
          id: "mentions",
          title: "ارجاع‌ها",
          description:
            "وقتی هم‌تیمی شما را به یک لید، تیکت یا تسک ارجاع می‌دهد.",
          enabled: true,
        },
        {
          id: "follows",
          title: "دنبال‌کنندگان جدید",
          description: "وقتی کسی شروع به دنبال کردن حساب شما می‌کند.",
          enabled: false,
        },
      ],
    },
    {
      id: "updates",
      title: "به‌روزرسانی‌ها",
      notifications: [
        {
          id: "product-updates",
          title: "به‌روزرسانی محصول",
          description: "اخبار قابلیت‌ها و بهبودهای جدید.",
          enabled: true,
        },
        {
          id: "tips",
          title: "نکات و آموزش‌ها",
          description: "محتوای مفید برای استفاده بهتر از پلتفرم.",
          enabled: false,
        },
      ],
    },
    {
      id: "account",
      title: "حساب",
      notifications: [
        {
          id: "security",
          title: "هشدارهای امنیتی",
          description: "هشدارهای مهم درباره امنیت حساب شما.",
          enabled: true,
        },
        {
          id: "billing",
          title: "به‌روزرسانی صورتحساب",
          description: "اعلان‌های مربوط به پرداخت‌ها و فاکتورها.",
          enabled: true,
        },
      ],
    },
  ],
  className,
}: SettingsNotifications3Props) => {
  return (
    <section className="py-32">
      <div
        className={cn(
          "container max-w-2xl space-y-10 tracking-tight",
          className,
        )}
      >
        <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="space-y-8">
          {categories.map((category) => (
            <div key={category.id} className="space-y-4">
              <h4 className="text-sm font-semibold tracking-wide text-muted-foreground uppercase">
                {category.title}
              </h4>
              <div className="divide-y rounded-lg border">
                {category.notifications.map((notification) => (
                  <div
                    key={notification.id}
                    className="flex items-center justify-between gap-4 p-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>
      </div>
    </section>
  );
};

export { SettingsNotifications3 };