import { Bell, Mail, MessageSquare } from "lucide-react";

import { Checkbox } from "@/components/ui/checkbox";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";

interface NotificationSettingItem {
  id: string;
  title: string;
  description: string;
  email: boolean;
  sms: boolean;
}

interface SettingsNotifications4Props {
  heading?: string;
  subHeading?: string;
  className?: string;
  notifications?: NotificationSettingItem[];
}

const SettingsNotifications4 = ({
  heading = "اعلان‌ها",
  subHeading = "تنظیمات ایمیل و پیامک خود را مدیریت کنید.",
  notifications = [
    {
      id: "mentions",
      title: "ارجاع مستقیم",
      description:
        "وقتی هم‌تیمی شما را به یک لید یا تسک ارجاع می‌دهد، مطلع شوید.",
      email: true,
      sms: false,
    },
    {
      id: "comments",
      title: "نظرات",
      description: "وقتی کسی روی پست‌های شما نظر می‌گذارد، به‌روزرسانی دریافت کنید.",
      email: true,
      sms: false,
    },
    {
      id: "messages",
      title: "پیام‌های مستقیم",
      description: "پیام‌های خصوصی جدید از سایر کاربران.",
      email: true,
      sms: true,
    },
    {
      id: "assignments",
      title: "محول‌شدن وظایف",
      description: "وقتی وظیفه‌ای به شما محول می‌شود.",
      email: true,
      sms: false,
    },
    {
      id: "deadlines",
      title: "یادآور مهلت‌ها",
      description: "یادآوری برای مهلت‌های پیش رو.",
      email: true,
      sms: true,
    },
    {
      id: "security",
      title: "هشدارهای امنیتی",
      description: "اعلان‌های مهم امنیتی برای حساب شما.",
      email: true,
      sms: true,
    },
    {
      id: "billing",
      title: "به‌روزرسانی صورتحساب",
      description: "اعلان‌های مربوط به پرداخت‌ها و فاکتورها.",
      email: true,
      sms: false,
    },
  ],
  className,
}: SettingsNotifications4Props) => {
  return (
    <section className="py-32">
      <div
        className={cn(
          "container max-w-4xl space-y-8 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>

        <Table>
          <TableHeader>
            <TableRow className="[&_div]:flex [&_div]:items-center [&_div]:justify-center [&_div]:gap-1.5 [&_div]:font-semibold [&_div]:text-muted-foreground/80 [&_div_svg]:size-4">
              <TableHead>
                <div className="!justify-start">
                  <Bell /> موضوع اطلاع‌رسانی
                </div>
              </TableHead>
              <TableHead>
                <div>
                  <Mail /> ایمیل
                </div>
              </TableHead>
              <TableHead>
                <div>
                  <MessageSquare /> پیامک
                </div>
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {notifications.map((notification) => (
              <TableRow key={notification.id}>
                <TableCell>
                  <p className="font-semibold">{notification.title}</p>
                  <p className="text-xs font-medium text-muted-foreground/70">
                    {notification.description}
                  </p>
                </TableCell>
                <TableCell className="text-center">
                  <Checkbox defaultChecked={notification.email} />
                </TableCell>
                <TableCell className="text-center">
                  <Checkbox defaultChecked={notification.sms} />
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </section>
  );
};

export { SettingsNotifications4 };