import { CornerDownRight } from "lucide-react";
import React from "react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Skills1Props {
  className?: string;
}

const Skills1 = ({ className }: Skills1Props) => {
  const stack = [
    {
      name: "Figma",
      category: "ابزار طراحی",
      icon: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
      experience: "۲ سال سابقه",
      className: "h-9",
    },
    {
      name: "React",
      category: "کتابخانه جاوااسکریپت",
      icon: "/block-media/shadcnblocks/block/logos/react-icon.svg",
      experience: "۴ سال سابقه",
    },
    {
      name: "Next.js",
      category: "فریم‌ورک فول‌استک",
      icon: "/block-media/shadcnblocks/block/logos/nextjs-icon.svg",
      experience: "۳ سال سابقه",
      className: "dark:invert",
    },
    {
      name: "استایل‌دهی مدرن",
      category: "فریم‌ورک CSS",
      icon: "/block-media/shadcnblocks/block/logos/tailwind-icon.svg",
      experience: "۳ سال سابقه",
    },
    {
      name: "v0",
      category: "ابزار هوش مصنوعی",
      icon: "/block-media/shadcnblocks/block/logos/v0-icon.svg",
      experience: "۳ سال سابقه",
      className: "dark:invert",
    },
    {
      name: "Vite",
      category: "ابزار بیلد",
      icon: "/block-media/shadcnblocks/block/logos/vite-icon.svg",
      experience: "۳ سال سابقه",
    },
  ];

  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="grid grid-cols-1 gap-5 lg:grid-cols-6 lg:gap-20">
          <div className="top-10 col-span-2 h-fit w-fit gap-3 space-y-7 py-8 lg:sticky">
            <h1 className="text-2xll font-semibold tracking-tight lg:text-2xll">
              ابزارها و پشته فنی
            </h1>
            <p className="text-base text-foreground/50">
              فناوری‌هایی که هر روز با آن‌ها طراحی و توسعه می‌دهم  از رابط
              کاربری تا استقرار محصول.
            </p>

            <div className="mt-20 flex w-full justify-between border-t py-2 lg:mt-34">
              <Button variant="ghost" className="tracking-tight lg:text-lg">
                <CornerDownRight className="size-5 text-orange-500" />
                گیت‌هاب
              </Button>
              <Button variant="ghost" className="tracking-tight lg:text-lg">
                <CornerDownRight className="size-5 text-orange-500" />
                تماس بگیرید
              </Button>
            </div>
          </div>
          <ul className="relative col-span-4 w-full space-y-4">
            {stack.map((item, index) => (
              <li
                key={index}
                className="flex flex-row items-center justify-between gap-10 rounded-2xl bg-muted p-2"
              >
                <div className="flex items-center gap-4">
                  <div className="flex size-20 items-center justify-center rounded-2xl bg-background 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>
                <Button
                  variant="ghost"
                  className="me-3 rounded-full bg-foreground/5 hover:bg-foreground/10"
                >
                  {item.experience}
                </Button>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
};

export { Skills1 };