import { MoveUpRight } from "lucide-react";

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

const faYear = (year: number) => year.toLocaleString("fa-IR");

const awards = [
  {
    title: "جایزه طراحی پیکسل‌محور",
    categories: ["طراحی دیجیتال", "رابط و تجربه کاربری"],
    year: 2023,
    color: "bg-amber-300",
  },
  {
    title: "جایزه برترین مهارت فنی",
    categories: ["توسعه وب", "نوآوری"],
    year: 2023,
    color: "bg-red-500",
  },
  {
    title: "جایزه برترین راهبرد",
    categories: ["راهبرد محصول", "اثر بازار"],
    year: 2022,
    color: "bg-blue-500",
  },
];

interface Awards3Props {
  className?: string;
}

const Awards3 = ({ className }: Awards3Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <h2 className="mb-6 text-xl font-semibold tracking-tighter text-foreground sm:text-xl lg:text-3xl">
          جوایز و تقدیرها
        </h2>
        <p className="mb-6 max-w-3xl text-base text-muted-foreground">
          تعهد ما به کیفیت، نوآوری و خلق تجربه‌های ارزشمند، زمینه‌ساز دریافت این افتخارات بوده است. این دستاوردها انگیزه‌ای برای ادامه مسیر و ارائه راهکارهای بهتر هستند.
        </p>

        {awards.map((award, index) => (
          <div
            key={index}
            className="group relative flex items-start gap-4 overflow-hidden border-b border-border p-4"
          >
            <div className="absolute inset-0 z-0 translate-y-full bg-accent transition-transform duration-300 ease-in-out group-hover:translate-y-0" />

            <div className="relative z-10 flex-1 space-y-2 pb-4">
              <div className="flex items-center gap-4">
                <div
                  className={`h-5 w-5 rounded-md ${award.color} flex items-center justify-center`}
                ></div>
                <h3 className="rounded-md font-medium">{award.title}</h3>
              </div>
              <p className="flex gap-x-2 ps-9 text-sm text-muted-foreground">
                {award.categories.map((category, index) => (
                  <span key={index}>{category}</span>
                ))}
              </p>
              <p className="ps-9 text-sm text-muted-foreground">
                {faYear(award.year)}
              </p>
            </div>

            <MoveUpRight className="relative z-10 mt-1 h-4 w-4 text-muted-foreground rtl:-scale-x-100" />
          </div>
        ))}
      </div>
    </section>
  );
};

export { Awards3 };