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 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>

        <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>
      </div>
    </section>
  );
};

export { SettingsNotifications4 };