import React from 'react';
import Link from '@docusaurus/Link';
import styles from './HomepageFeatures.module.css';

interface FeatureItem {
  id: string;
  title: string;
  description: string;
  icon: React.ReactNode;
  link: string;
  color: string;
  gradient: string;
}

const FeatureList: FeatureItem[] = [
  {
    id: 'backend',
    title: '后端技术',
    description:
      '深度讲解 Spring Boot / Spring Cloud 核心概念、最佳实践与微服务架构，含真实项目案例。',
    icon: '⚙️',
    link: '/docs/backend-doc/intro-docs',
    color: '#2160fd',
    gradient: 'from-blue-500/20 to-transparent',
  },
  {
    id: 'frontend',
    title: '前端开发',
    description:
      '系统化学习 React / Vue 现代框架、状态管理、组件设计与性能优化，打造高质量前端应用。',
    icon: '⚛️',
    link: '/docs/frontend-doc/intro-docs',
    color: '#06b6d4',
    gradient: 'from-cyan-500/20 to-transparent',
  },
  {
    id: 'algorithms',
    title: '算法与面试',
    description:
      '精选 LeetCode 题目分类讲解、编程面试题库与数据结构深度分析，快速突破算法关卡。',
    icon: '🧠',
    link: '/docs/LeetCode/intro-docs',
    color: '#ec4899',
    gradient: 'from-pink-500/20 to-transparent',
  },
];

interface FeatureCardProps extends FeatureItem {}

function FeatureCard({
  title,
  description,
  icon,
  link,
  color,
  gradient,
}: FeatureCardProps): JSX.Element {
  return (
    <Link
      to={link}
      className={`${styles.featureCard} group`}
      style={
        {
          '--card-color': color,
        } as React.CSSProperties & { '--card-color': string }
      }
    >
      <div className={styles.cardInner}>
        {/* Icon */}
        <div className={styles.cardIcon}>{icon}</div>

        {/* Content */}
        <div className={styles.cardContent}>
          <h3 className={styles.cardTitle}>{title}</h3>
          <p className={styles.cardDescription}>{description}</p>
        </div>

        {/* Gradient Background */}
        <div className={`${styles.cardGradient} ${gradient}`}></div>

        {/* Arrow Icon */}
        <div className={styles.cardArrow}>→</div>
      </div>
    </Link>
  );
}

export default function HomepageFeatures(): JSX.Element {
  return (
    <section className={styles.features}>
      <div className="container">
        <div className={styles.featureGrid}>
          {FeatureList.map((props) => (
            <FeatureCard key={props.id} {...props} />
          ))}
        </div>
      </div>
    </section>
  );
}