import {
  ShoppingCart,
  FileText,
  Settings,
} from "lucide-react";

import { cn } from "@/lib/utils";

const features = [
  {
    id: "feature-1",
    title: "ثبت و مدیریت سفارش ها",
    description: "ثبت و پیگیری سفارش‌ها",
    icon: ShoppingCart,
  },
  {
    id: "feature-2",
    title: "دسترسی کامل به گزارش گیری و معاملات",
    description: "گزارش گیری کامل و معاملات ۲۴ ساعته",
    icon: FileText,
  },
  {
    id: "feature-3",
    title: "پنل مدیریت با ابزارهای پیشرفته",
    description: "ابزارهای پیشرفته برای مدیریت ادمین و کنترل سیستم",
    icon: Settings,
  },
];

interface FeatureGridWithIconsProps {
  className?: string;
}

const FeatureGridWithIcons = ({ className }: FeatureGridWithIconsProps) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container mx-auto flex flex-col items-start gap-8 lg:gap-12 lg:px-16 xl:gap-32">
        <h2 className="text-heading-2 font-semibold md:shrink-0 lg:max-w-1/3 lg:max-w-3xl">
        یک پلتفرم اختصاصی برای مدیریت کامل معاملات
        </h3>
        <div className="grid w-full gap-6">
          {features.map((feature) => (
            <div
              key={feature.id}
              className="flex rounded-lg border border-border bg-accent p-6 md:p-8"
            >
              <feature.icon className="ml-3 size-6 shrink-0 lg:ml-6 lg:size-7 text-primary" />
              <div className="flex-1">
                <h4 className="text-heading-4 mb-2 font-medium text-accent-foreground">
                  {feature.title}
                </h4>
                <p className="text-body-sm font-medium text-muted-foreground">
                  {feature.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { FeatureGridWithIcons };