import React from "react";

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

interface Skills2Props {
  className?: string;
}

const Skills2 = ({ className }: Skills2Props) => {
  const stack = [
    {
      name: "Figma",
      category: "ابزار طراحی",
      icon: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
      usage: "۷۵٪",
    },
    {
      name: "React",
      category: "کتابخانه جاوااسکریپت",
      icon: "/block-media/shadcnblocks/block/logos/react-icon.svg",
      usage: "۹۵٪",
    },
    {
      name: "Next.js",
      category: "فریم‌ورک فول‌استک",
      icon: "/block-media/shadcnblocks/block/logos/nextjs-icon.svg",
      usage: "۹۰٪",
      className: "dark:invert",
    },
    {
      name: "استایل‌دهی مدرن",
      category: "فریم‌ورک CSS",
      icon: "/block-media/shadcnblocks/block/logos/tailwind-icon.svg",
      usage: "۹۰٪",
    },
    {
      name: "v0",
      category: "ابزار هوش مصنوعی",
      icon: "/block-media/shadcnblocks/block/logos/v0-icon.svg",
      usage: "۸۵٪",
      className: "dark:invert",
    },
    {
      name: "Vite",
      category: "ابزار بیلد",
      icon: "/block-media/shadcnblocks/block/logos/vite-icon.svg",
      usage: "۸۰٪",
    },
    {
      name: "TypeScript",
      category: "زبان برنامه‌نویسی",
      icon: "/block-media/shadcnblocks/block/logos/typescript-icon.svg",
      usage: "۸۵٪",
    },
    {
      name: "GitHub",
      category: "کنترل نسخه",
      icon: "/block-media/shadcnblocks/block/logos/github-icon.svg",
      usage: "۹۵٪",
      className: "dark:invert",
    },
    {
      name: "ویرایشگر کد",
      category: "ویرایشگر کد",
      icon: "/block-media/shadcnblocks/block/logos/vscode-icon.svg",
      usage: "۷۰٪",
    },
    {
      name: "Vercel",
      category: "پلتفرم میزبانی",
      icon: "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
      usage: "۸۰٪",
      className: "dark:invert",
    },
    {
      name: "Notion",
      category: "ابزار بهره‌وری",
      icon: "/block-media/shadcnblocks/block/logos/notion-icon.svg",
      usage: "۸۵٪",
    },
    {
      name: "Cursor",
      category: "ویرایشگر کد هوشمند",
      icon: "/block-media/shadcnblocks/block/logos/cursor-icon.svg",
      usage: "۹۵٪",
      className: "dark:invert",
    },
    {
      name: "Astro",
      category: "فریم‌ورک وب",
      icon: "/block-media/shadcnblocks/block/logos/astro-icon.svg",
      usage: "۶۰٪",
      className: "dark:invert",
    },
    {
      name: "Shadcn/ui",
      category: "کتابخانه کامپوننت",
      icon: "/block-media/shadcnblocks/block/logos/shadcn-ui-icon.svg",
      usage: "۹۰٪",
      className: "dark:invert",
    },
  ];

  return (
    <section className={cn("py-32", className)}>
      <div className="container space-y-10">
        <h1 className="text-2xll font-semibold tracking-tight lg:text-2xll">
          ابزارها و پشته فنی
        </h1>

        <ul className="relative grid w-full gap-3 lg:grid-cols-2">
          {stack.map((item, index) => (
            <li
              key={index}
              className="flex flex-row items-center justify-between gap-10 rounded-2xl p-2"
              style={{
                backgroundImage:
                  "repeating-linear-gradient(45deg, transparent, transparent 2px, var(--muted) 2px, var(--muted) 4px)",
              }}
            >
              <div className="flex items-center gap-4">
                <div className="flex size-20 items-center justify-center rounded-2xl p-2">
                  <img
                    src={item.icon}
                    alt={item.name}
                    className={cn("h-8 w-8 object-contain", item.className)}
                  />
                </div>
                <div>
                  <h2 className="text-xl font-semibold tracking-tight">
                    {item.name}
                  </h2>
                  <p className="text-sm text-foreground/50">{item.category}</p>
                </div>
              </div>
              <div className="rounded-full ps-5 font-semibold">{item.usage}</div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
};

export { Skills2 };