import React from 'react';
import { Globe, Server, Activity, Calendar } from 'lucide-react';
import { Service, ClientStats } from '../types';

interface SharedHostingViewProps {
  service: Service;
  stats: ClientStats | null;
}

const SharedHostingView: React.FC<SharedHostingViewProps> = ({ service, stats }) => {
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
          <div className="flex items-center gap-3 mb-2">
            <div className="p-2 bg-blue-50 rounded-lg text-blue-600">
              <Globe size={18} />
            </div>
            <p className="text-sm font-medium text-slate-500">Domain</p>
          </div>
          <p className="text-lg font-semibold text-slate-900 truncate" title={service.domain}>
            {service.domain}
          </p>
        </div>
        
        <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
          <div className="flex items-center gap-3 mb-2">
            <div className="p-2 bg-purple-50 rounded-lg text-purple-600">
              <Server size={18} />
            </div>
            <p className="text-sm font-medium text-slate-500">Product</p>
          </div>
          <p className="text-lg font-semibold text-slate-900 truncate" title={service.productName}>
            {service.productName}
          </p>
        </div>

        <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
          <div className="flex items-center gap-3 mb-2">
            <div className="p-2 bg-green-50 rounded-lg text-green-600">
              <Activity size={18} />
            </div>
            <p className="text-sm font-medium text-slate-500">Status</p>
          </div>
          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
            service.status === 'Active' ? 'bg-green-100 text-green-800' : 'bg-slate-100 text-slate-800'
          }`}>
            {service.status}
          </span>
        </div>

        <div className="bg-white p-4 rounded-xl border border-slate-200 shadow-sm">
          <div className="flex items-center gap-3 mb-2">
            <div className="p-2 bg-orange-50 rounded-lg text-orange-600">
              <Calendar size={18} />
            </div>
            <p className="text-sm font-medium text-slate-500">Billing</p>
          </div>
          <p className="text-lg font-semibold text-slate-900">
            {service.billingCycle}
          </p>
        </div>
      </div>
    </div>
  );
};

export default SharedHostingView;