import {Globe, Mail, ThumbsUp} from 'lucide-react';
import {useEffect, useState} from "react";
import axios from "axios";
import { Author } from "../types/auth";
import { Link } from 'react-router-dom';
import { VkIcon } from "../icons/custom/VkIcon";
import { OkIcon } from "../icons/custom/OkIcon";
import ArticlesWord from './Words/ArticlesWord';


export function AuthorsSection() {
  const [authors, setAuthors] = useState<Author[]>([]);
  const showAuthors = false;

  // Загрузка авторов
  useEffect(() => {
    const fetchAuthors = async () => {
      try {
        const response = await axios.get('/api/authors', {
          params: { role: 'WRITER' },
        });
        setAuthors(response.data);
      } catch (error) {
        console.error('Ошибка загрузки авторов:', error);
      }
    };

    fetchAuthors();
  }, []);

  return (
      <section className="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
        {showAuthors && (
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900">Наши авторы</h2>
            <p className="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
              Познакомьтесь с талантливыми писателями и экспертами, работающими для Вас
            </p>
          </div>
        )}

        {showAuthors && (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {authors
                .filter(a => a.isActive)
                .map((author) => (
                <div key={author.id} className="bg-white rounded-lg shadow-md overflow-hidden transition-transform hover:scale-[1.02] h-full">
                  <div className="p-6 flex flex-col flex-grow min-h-[200px] h-full">
                    <div className="flex items-center mb-4">
                      <img
                          src={author.avatarUrl}
                          alt={author.displayName}
                          className="w-14 h-14 rounded-full object-cover mr-4 transition-transform duration-300 hover:scale-150"
                      />
                      <div>
                        <h3 className="text-xl font-bold text-gray-900">{author.displayName}</h3>
                        <div className="flex mt-2 space-x-2">
                          {author.okUrl && (
                              <a
                                  href={author.okUrl}
                                  target="_blank"
                                  rel="noopener noreferrer"
                                  className="text-gray-400 hover:text-blue-500 transition-colors"
                              >
                                <OkIcon size={18} />
                              </a>
                          )}
                          {author.vkUrl && (
                              <a
                                  href={author.vkUrl}
                                  target="_blank"
                                  rel="noopener noreferrer"
                                  className="text-gray-400 hover:text-pink-500 transition-colors"
                              >
                                <VkIcon size={18} />
                              </a>
                          )}
                          {author.websiteUrl && (
                              <a
                                  href={author.websiteUrl}
                                  target="_blank"
                                  rel="noopener noreferrer"
                                  className="text-gray-400 hover:text-gray-700 transition-colors"
                              >
                                <Globe size={18} />
                              </a>
                          )}
                          {author.email && (
                              <a
                                  href={author.email}
                                  target="_blank"
                                  rel="noopener noreferrer"
                                  className="text-gray-400 hover:text-gray-700 transition-colors"
                              >
                                <Mail size={18} />
                              </a>
                          )}
                        </div>
                      </div>
                    </div>
                    <p className="text-gray-600">{author.bio}</p>

                    <div className="mt-auto pt-6 border-t border-gray-100">
                      <div className="flex justify-between items-center">

                        <div className="flex items-center text-sm text-gray-500 space-x-2">
                          <span> {author.articlesCount} <ArticlesWord articles={author.articlesCount} /> · </span>
                          <div className="flex items-center">
                            <ThumbsUp size={16} className="mr-1" />
                            <span>{author.totalLikes}</span>
                          </div>
                        </div>

                        <Link
                            to={`/search?author=${author.id}&role=WRITER&authorName=${author.displayName}`}
                            className="text-blue-600 hover:text-blue-800 text-sm font-medium"
                        >
                          Статьи автора →
                        </Link>
                      </div>
                    </div>
                  </div>
                </div>
            ))}
          </div>
        )}
      </section>
  );
}