import { useState } from 'react'
import './HelloWorld.css'

interface HelloWorldProps {
  msg: string
}

function HelloWorld({ msg }: HelloWorldProps) {
  const [count, setCount] = useState(0)

  const features = [
    {
      title: 'React 18',
      description: '使用最新的 React 18 特性'
    },
    {
      title: 'TypeScript',
      description: '完整的 TypeScript 支持'
    },
    {
      title: 'Vite',
      description: '极速的开发体验'
    },
    {
      title: 'Z-Service',
      description: '集成 Z-Tools 开发服务'
    }
  ]

  const reset = () => {
    setCount(0)
  }

  return (
    <div className="hello">
      <h2>{msg}</h2>
      <div className="features">
        {features.map((feature, index) => (
          <div key={index} className="feature-card">
            <h3>{feature.title}</h3>
            <p>{feature.description}</p>
          </div>
        ))}
      </div>
      
      <div className="actions">
        <button 
          onClick={() => setCount(count + 1)} 
          className="btn btn-primary"
        >
          点击次数: {count}
        </button>
        <button 
          onClick={reset} 
          className="btn btn-secondary"
        >
          重置
        </button>
      </div>
    </div>
  )
}

export default HelloWorld
