import React from "react";

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

interface Awards1Props {
  className?: string;
}

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

const Awards1 = ({ className }: Awards1Props) => {
  const awards = [
    {
      name: "برنده جایزه طراحی استایل‌دهی",
      description:
        "به پاس کیفیت ممتاز در طراحی و عملکرد وب مورد تقدیر قرار گرفته است.",
      year: 2024,
      url: "#",
    },
    {
      name: "سایت روز Awwwards",
      description:
        "به دلیل نوآوری و خلاقیت در توسعه وب برگزیده شده است.",
      year: 2023,
      url: "#",
    },
    {
      name: "بلاک‌های رابط کاربری",
      description:
        "به دلیل طراحی رابط کاربری و تجربه کاربری ممتاز مورد تقدیر قرار گرفته است.",
      year: 2023,
      url: "https://www.ShadcnBlocks",
    },
    {
      name: "تعالی در طراحی وب",
      description:
        "به پاس کیفیت بالای طراحی و اجرای فنی مورد تقدیر قرار گرفته است.",
      year: 2022,
      url: "#",
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container space-y-10 lg:space-y-12">
        <h1 className="max-w-md text-2xll tracking-tighter lg:text-2xll">
          جایزه‌ها
        </h1>
        <table className="w-full border-collapse">
          <thead>
            <tr className="h-12 border-b text-start text-sm text-foreground/80">
              <th className="font-semibold">نام</th>
              <th className="font-semibold">توضیحات</th>
              <th className="text-end font-semibold">سال</th>
            </tr>
          </thead>
          <tbody>
            {awards.map((award, index) => (
              <tr
                key={index}
                className="h-20 border-b text-start text-sm text-foreground/40"
              >
                <td className="text-lg font-light tracking-tight text-foreground lg:text-xl">
                  <a
                    href={award.url}
                    target={award.url.startsWith("http") ? "_blank" : undefined}
                    rel={
                      award.url.startsWith("http")
                        ? "noopener noreferrer"
                        : undefined
                    }
                    className="hover:underline"
                    title={award.name}
                  >
                    {award.name}
                  </a>
                </td>
                <td>{award.description}</td>
                <td className="text-end text-foreground">
                  {faYear(award.year)}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
};

export { Awards1 };