import { useState } from 'react'
import { FaServer, FaDesktop, FaPrint, FaNetworkWired } from 'react-icons/fa6'
import { PageHeader, Card } from '../components/ui'

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

  const assetCategories = [
    { icon: FaServer, name: 'Server', count: 0 },
    { icon: FaDesktop, name: 'Arbeitsplaetze', count: 0 },
    { icon: FaPrint, name: 'Drucker', count: 0 },
    { icon: FaNetworkWired, name: 'Netzwerkgeraete', count: 0 },
  ]

  return (
    <div className="page">
      <PageHeader title="Assets" subtitle="IT-Inventar und Geraete" />

      <input
        className="form-control"
        placeholder="Assets suchen..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        style={{ maxWidth: 400, marginBottom: 16 }}
      />

      <div className="kpi-grid">
        {assetCategories.map(({ icon: Icon, name, count }) => (
          <div key={name} className="kpi">
            <span className="kpi-accent" />
            <div className="kpi-label"><Icon /> {name}</div>
            <div className="kpi-value">{count}</div>
          </div>
        ))}
      </div>

      <Card><p className="muted" style={{ margin: 0 }}>Asset-Modul - mit Appwrite verbinden, um IT-Assets zu verwalten.</p></Card>
    </div>
  )
}