export default function Deployments() {
  const deployments = [
    { 
      name: 'nginx-deployment', 
      namespace: 'default', 
      ready: '3/3', 
      upToDate: 3, 
      available: 3, 
      age: '2h', 
      image: 'nginx:1.21',
      strategy: 'RollingUpdate'
    },
    { 
      name: 'app-deployment', 
      namespace: 'default', 
      ready: '2/2', 
      upToDate: 2, 
      available: 2, 
      age: '4h', 
      image: 'app:v1.0',
      strategy: 'RollingUpdate'
    },
    { 
      name: 'api-deployment', 
      namespace: 'default', 
      ready: '1/1', 
      upToDate: 1, 
      available: 1, 
      age: '1d', 
      image: 'api:v2.1',
      strategy: 'Recreate'
    },
  ]

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold">Deployments</h1>
        <p className="text-sm text-gray-600">Manage application deployments and scaling.</p>
      </div>

      <div className="bg-white border border-gray-200 rounded-lg shadow-sm">
        <div className="px-6 py-4 border-b border-gray-200">
          <div className="flex items-center justify-between">
            <h2 className="text-lg font-medium">Deployment List</h2>
            <button className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm">
              Create Deployment
            </button>
          </div>
        </div>
        
        <div className="overflow-x-auto">
          <table className="min-w-full">
            <thead className="bg-gray-50 border-b border-gray-200">
              <tr>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Namespace</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ready</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Up-to-date</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Available</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Age</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Image</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Strategy</th>
                <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {deployments.map((deployment) => (
                <tr key={deployment.name} className="hover:bg-gray-50">
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="text-sm font-medium text-gray-900">{deployment.name}</div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{deployment.namespace}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{deployment.ready}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{deployment.upToDate}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{deployment.available}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{deployment.age}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{deployment.image}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{deployment.strategy}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <button className="text-blue-600 hover:text-blue-900 mr-3">View</button>
                    <button className="text-green-600 hover:text-green-900 mr-3">Scale</button>
                    <button className="text-orange-600 hover:text-orange-900 mr-3">Rollout</button>
                    <button className="text-red-600 hover:text-red-900">Delete</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}