import React from "react";

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

interface Awards4Props {
  className?: string;
}

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

const faRowNum = (index: number) =>
  `(${(index + 1).toLocaleString("fa-IR", { minimumIntegerDigits: 3 })}`;

const Awards4 = ({ className }: Awards4Props) => {
  const awards = [
    {
      name: "برنده جایزه طراحی استایل‌دهی",
      description:
        "به پاس کیفیت ممتاز در طراحی و عملکرد وب مورد تقدیر قرار گرفته است.",
      year: 2024,
      logo: "/block-media/shadcnblocks/block/block-1.svg",
    },
    {
      name: "سایت روز Awwwards",
      description:
        "به دلیل نوآوری و خلاقیت در توسعه وب برگزیده شده است.",
      year: 2023,
      logo: "/block-media/shadcnblocks/block/block-2.svg",
    },
    {
      name: "بهترین طراحی رابط و تجربه کاربری",
      description:
        "به دلیل طراحی رابط کاربری و تجربه کاربری ممتاز مورد تقدیر قرار گرفته است.",
      year: 2023,
      logo: "/block-media/shadcnblocks/block/block-3.svg",
    },
    {
      name: "تعالی در طراحی وب",
      description:
        "به پاس کیفیت بالای طراحی و اجرای فنی مورد تقدیر قرار گرفته است.",
      year: 2022,
      logo: "/block-media/shadcnblocks/block/block-4.svg",
    },
    {
      name: "اپلیکیشن موبایل سال",
      description:
        "به دلیل نوآوری در طراحی موبایل و ارائه تجربه کاربری برتر مورد تقدیر قرار گرفته است.",
      year: 2022,
      logo: "/block-media/shadcnblocks/block/block-5.svg",
    },
    {
      name: "جایزه نوآوری دیجیتال",
      description:
        "به دلیل ارائه راهکارهای دیجیتال نوآورانه و فناوری خلاقانه مورد تقدیر قرار گرفته است.",
      year: 2021,
      logo: "/block-media/shadcnblocks/block/block-6.svg",
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container space-y-10 lg:space-y-20">
        <div className="flex w-full items-end justify-between">
          <h1 className="text-2xll font-semibold tracking-tighter lg:text-8xl">
            جوایز
          </h1>
          <h2 className="text-lg font-semibold tracking-tighter lg:text-3xl">
            (۲۱۵–۲۲۵©)
          </h2>
        </div>

        <table className="w-full border-collapse">
          <thead>
            <tr className="h-12 border-b text-start text-foreground/40">
              <th className="hidden min-w-30 font-normal lg:table-cell lg:min-w-40"></th>
              <th className="font-normal">نام</th>
              <th className="hidden font-normal md:table-cell">توضیحات</th>
              <th className="text-end font-normal">سال</th>
            </tr>
          </thead>
          <tbody>
            {awards.map((award, index) => (
              <tr
                key={index}
                className="h-20 border-b text-start text-foreground/40"
              >
                <td className="hidden font-medium tracking-tight text-foreground/50 lg:table-cell">
                  {faRowNum(index)}
                </td>
                <td className="text-lg font-medium tracking-tight text-foreground lg:text-xl">
                  <div className="flex items-center gap-2">
                    <span className="size-8 rounded-xl bg-foreground object-cover p-1.5">
                      <img
                        src={award.logo}
                        className="invert"
                        alt={award.name}
                      />
                    </span>
                    {award.name}
                  </div>
                </td>
                <td className="hidden md:table-cell">{award.description}</td>
                <td className="text-end text-foreground">
                  {faYear(award.year)}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
};

export { Awards4 };