import { ChevronRight } from "lucide-react";

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

interface Feature9Props {
  className?: string;
}

const Feature9 = ({ className }: Feature9Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center gap-6">
          <Badge variant="outline">فروش آنلاین</Badge>
          <h2 className="mb-2 text-center text-3xl font-semibold lg:text-2xll">
            فروش آنلاین را مقیاس‌پذیر کنید
          </h2>
          <p className="text-muted-foreground lg:text-lg">
            تجربه خرید را روان‌تر بسازید
          </p>
          <div className="mt-6 flex flex-col gap-6 lg:flex-row">
            <Card className="flex flex-col justify-between gap-5 lg:w-1/3">
              <CardHeader className="items-start">
                <Badge variant="outline">فروشگاه</Badge>
              </CardHeader>
              <CardContent className="text-lg lg:text-xl">
                مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
              </CardContent>
              <CardFooter>
                <Button variant="outline">
                  تبدیل خرید
                  <ChevronRight className="ms-2 h-4 w-4 rtl:rotate-180" />
                </Button>
              </CardFooter>
            </Card>
            <div className="lg:w-1/3">
              <img
                src="/block-media/shadcnblocks/block/placeholder-1.svg"
                alt="مدیریت سفارش"
                className="h-full max-h-96 w-full rounded-md object-cover"
              />
            </div>
            <Card className="flex flex-col justify-between gap-5 lg:w-1/3">
              <CardHeader className="items-start">
                <Badge variant="outline">مدیریت سفارش</Badge>
              </CardHeader>
              <CardContent className="text-lg lg:text-xl">
                محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.
              </CardContent>
              <CardFooter>
                <Button variant="outline">
                  فروش آنلاین
                  <ChevronRight className="ms-2 h-4 w-4 rtl:rotate-180" />
                </Button>
              </CardFooter>
            </Card>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature9 };