import {
  ChevronRight,
  CreditCard,
  Package,
  RotateCcw,
  ShoppingBag,
  Truck,
  User,
} from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface HelpCategory {
  icon: React.ReactNode;
  title: string;
  description: string;
  articles: number;
}

interface PopularTopic {
  title: string;
  href: string;
}

interface Help1Props {
  title?: string;
  description?: string;
  categories?: HelpCategory[];
  popularTopics?: PopularTopic[];
  className?: string;
}

const DEFAULT_CATEGORIES: HelpCategory[] = [
  {
    icon: <Package className="size-5" />,
    title: "سفارش‌ها",
    description: "پیگیری، ویرایش یا لغو سفارش",
    articles: 12,
  },
  {
    icon: <Truck className="size-5" />,
    title: "ارسال",
    description: "گزینه‌های ارسال و پیگیری مرسوله",
    articles: 8,
  },
  {
    icon: <RotateCcw className="size-5" />,
    title: "بازگشت و استرداد",
    description: "سیاست بازگشت کالا و مراحل",
    articles: 15,
  },
  {
    icon: <CreditCard className="size-5" />,
    title: "پرداخت",
    description: "روش‌های پرداخت و رفع مشکلات",
    articles: 10,
  },
  {
    icon: <User className="size-5" />,
    title: "حساب کاربری",
    description: "پروفایل، رمز عبور و تنظیمات",
    articles: 7,
  },
  {
    icon: <ShoppingBag className="size-5" />,
    title: "محصولات",
    description: "سایزبندی، نگهداری و موجودی",
    articles: 9,
  },
];

const DEFAULT_TOPICS: PopularTopic[] = [
  { title: "سفارشم کجاست؟", href: "#" },
  { title: "نحوه بازگشت کالا", href: "#" },
  { title: "فراموشی رمز عبور", href: "#" },
  { title: "پرداخت انجام نمی‌شود", href: "#" },
  { title: "راهنمای سایز", href: "#" },
  { title: "ارسال به کشور من", href: "#" },
];

const Help1 = ({
  title = " راهنمای کاربران",
  description = "امروز چطور می‌توانیم کمک‌تان کنیم؟",
  categories = DEFAULT_CATEGORIES,
  popularTopics = DEFAULT_TOPICS,
  className,
}: Help1Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container max-w-4xl">
        <div className="mb-10 text-center">
          <h1 className="mb-4 text-xl font-medium tracking-tight md:text-2xll">
            {title}
          </h1>
          <p className="text-muted-foreground">{description}</p>
        </div>

        <div className="mb-10 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {categories.map((category, index) => (
            <Card
              key={index}
              className="group cursor-pointer gap-0 p-0 transition-colors hover:bg-muted/50"
            >
              <CardContent className="p-4">
                <div className="flex items-start gap-3">
                  <div className="shrink-0 text-muted-foreground">
                    {category.icon}
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center justify-between">
                      <h3 className="font-medium">{category.title}</h3>
                      <ChevronRight className="size-4 text-muted-foreground transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" />
                    </div>
                    <p className="mt-1 text-sm text-muted-foreground">
                      {category.description}
                    </p>
                    <p className="mt-1.5 text-xs text-muted-foreground">
                      {category.articles.toLocaleString("fa-IR")} مقاله
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

        <div className="rounded-xl bg-muted/50 p-6">
          <h2 className="mb-3 text-lg font-medium">موضوعات پرطرفدار</h2>
          <div className="-mx-2 grid sm:grid-cols-2 lg:grid-cols-3">
            {popularTopics.map((topic, index) => (
              <a
                key={index}
                href={topic.href}
                className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-background"
              >
                <ChevronRight className="size-4 text-muted-foreground rtl:rotate-180" />
                {topic.title}
              </a>
            ))}
          </div>
        </div>

        <div className="mt-10 text-center">
          <p className="text-sm text-muted-foreground">
            پاسخ خود را پیدا نکردید؟
          </p>
          <Button className="mt-3">تماس با پشتیبانی</Button>
        </div>
      </div>
    </section>
  );
};

export { Help1 };