"use client"

import { useState } from 'react'
import { Car, Home } from 'lucide-react'
import AdminVehicles from '@/components/AdminVehicles'
import AdminInteriors from '@/components/AdminInteriors'

export default function AdminProperties() {
  const [activeTab, setActiveTab] = useState<'vehicles' | 'interiors'>('vehicles')

  return (
    <div className="bg-black/60 rounded-2xl p-4 border border-gray-700/50">
      {/* Header */}
      <div className="text-center mb-4">
        <div className="w-10 h-10 bg-gradient-to-br from-green-600/20 to-blue-600/20 rounded-full flex items-center justify-center mx-auto mb-2">
          {activeTab === 'vehicles' ? (
            <Car className="w-5 h-5 text-green-400" />
          ) : (
            <Home className="w-5 h-5 text-blue-400" />
          )}
        </div>
        <h3 className="text-base font-bold text-white mb-1">Server Properties</h3>
        <div className="w-10 h-0.5 bg-gradient-to-r from-green-500 to-blue-500 rounded-full mx-auto"></div>
      </div>

      {/* Toggle */}
      <div className="flex justify-center mb-4">
        <div className="flex space-x-3">
          <button
            onClick={() => setActiveTab('vehicles')}
            className={`flex items-center justify-center space-x-2 py-3 px-6 rounded-xl transition-all duration-200 font-medium ${
              activeTab === 'vehicles'
                ? 'bg-gradient-to-r from-green-600 to-green-700 text-white shadow-lg shadow-green-500/25'
                : 'bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white'
            }`}
          >
            <Car className="w-5 h-5" />
            <span>Vehicles</span>
          </button>
          <button
            onClick={() => setActiveTab('interiors')}
            className={`flex items-center justify-center space-x-2 py-3 px-6 rounded-xl transition-all duration-200 font-medium ${
              activeTab === 'interiors'
                ? 'bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-lg shadow-blue-500/25'
                : 'bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white'
            }`}
          >
            <Home className="w-5 h-5" />
            <span>Interiors</span>
          </button>
        </div>
      </div>

      {activeTab === 'vehicles' ? <AdminVehicles /> : <AdminInteriors />}
    </div>
  )
}