"use client";

import { useState } from "react";
import Image from "next/image";

type Article = {
  href: string;
  image: string;
  title: string;
  tag: string;
  meta: string;
  alt: string;
};

function ArrowIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M7 17L17 7M17 7H7M17 7V17" />
    </svg>
  );
}

const ALL_TAG = "Все";

export default function ArticlesGrid({ articles }: { articles: Article[] }) {
  const allTags = [ALL_TAG, ...Array.from(new Set(articles.map((a) => a.tag)))];
  const [activeTag, setActiveTag] = useState(ALL_TAG);

  const filtered = activeTag === ALL_TAG ? articles : articles.filter((a) => a.tag === activeTag);

  return (
    <section id="materials" className="max-w-6xl mx-auto px-6 md:px-12 py-16">
      <div className="flex flex-col md:flex-row md:items-baseline justify-between gap-6 mb-10">
        <h2 className="text-3xl md:text-7xl font-black leading-[0.85] tracking-tighter whitespace-nowrap">
          Все&nbsp;статьи<span className="text-[#7a1b1b]">.</span>
        </h2>
        <div className="flex flex-wrap gap-2">
          {allTags.map((tag) => (
            <button
              key={tag}
              onClick={() => setActiveTag(tag)}
              className={`px-4 py-2 text-xs font-bold uppercase tracking-wider border transition-all duration-300 ${
                activeTag === tag
                  ? "bg-[#7a1b1b] border-[#7a1b1b] text-white"
                  : "border-black/20 text-black/60 hover:border-black/40 hover:text-black"
              }`}
            >
              {tag}
            </button>
          ))}
        </div>
      </div>

      <div className="grid md:grid-cols-2 gap-6">
        {filtered.length === 0 && (
          <div className="col-span-2 text-center py-20 text-black/30">Нет материалов в этой категории</div>
        )}
        {filtered.map((article, index) => (
          <a
            key={article.title}
            href={article.href}
            target="_blank"
            rel="noopener noreferrer"
            className="group relative overflow-hidden border border-black/10 hover:border-[#7a1b1b]/50 bg-white transition-all duration-500"
          >
            <div className="aspect-[16/9] relative overflow-hidden">
              <Image
                src={article.image}
                alt={article.alt}
                fill
                sizes="(max-width: 768px) 100vw, 50vw"
                className="object-cover transition-transform duration-700 group-hover:scale-105 saturate-[0.85] group-hover:saturate-100"
              />
            </div>
            <div className="p-5">
              <div className="flex items-center gap-3 mb-3">
                <span className="text-[10px] font-bold uppercase tracking-wider bg-[#7a1b1b] text-white px-2 py-0.5">
                  {article.tag}
                </span>
                <span className="text-[10px] text-black/40 uppercase tracking-wider">{article.meta}</span>
              </div>
              <h3 className="text-xl font-bold leading-tight group-hover:text-[#7a1b1b] transition-colors">
                {article.title}
              </h3>
            </div>
            <div className="absolute bottom-5 right-5 w-10 h-10 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300 translate-x-2 group-hover:translate-x-0 text-[#7a1b1b]">
              <ArrowIcon />
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}