import { useState } from 'react'
import { FaServer, FaDesktop, FaPrint, FaNetworkWired } from 'react-icons/fa6'

export default function AssetsPage() {
  const [searchTerm, setSearchTerm] = useState('')

  // Placeholder data - would come from Appwrite in production
  const assetCategories = [
    { icon: FaServer, name: 'Servers', count: 0 },
    { icon: FaDesktop, name: 'Workstations', count: 0 },
    { icon: FaPrint, name: 'Printers', count: 0 },
    { icon: FaNetworkWired, name: 'Network Devices', count: 0 }
  ]

  return (
    <div className="main-content">
      <header className="text-center mb-2">
        <h2>Assets Management</h2>
      </header>

      <div className="search-bar mb-2">
        <input
          type="text"
          placeholder="Search assets..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="input"
          style={{ width: '100%', maxWidth: '400px' }}
        />
      </div>

      <div className="assets-grid">
        {assetCategories.map(({ icon: Icon, name, count }) => (
          <div key={name} className="asset-card">
            <Icon size={48} className="text-teal" />
            <h4>{name}</h4>
            <span className="asset-count">{count}</span>
          </div>
        ))}
      </div>

      <div className="text-center mt-4 text-grey">
        <p>Asset management module - Connect to Appwrite to manage your IT assets.</p>
      </div>
    </div>
  )
}
