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: "فعالیت CRM",
      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: "راهنماهای کوتاه برای استفاده بهتر از CRM و افزایش تبدیل.",
          enabled: false,
        },
      ],
    },
    {
      id: "account",
      title: "حساب و امنیت",
      notifications: [
        {
          id: "security",
          title: "هشدار امنیتی",
          description: "ورود مشکوک، تغییر رمز و رویدادهای حساس حساب.",
          enabled: true,
        },
        {
          id: "billing",
          title: "صورتحساب",
          description: "فاکتور، تمدید اشتراک و وضعیت پرداخت.",
          enabled: true,
        },
      ],
    },
  ],
  className,
}: SettingsNotifications3Props) => {
  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-10 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="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>
      </div>
    </section>
  );
};

export { SettingsNotifications3 };