import Link from 'next/link';
import { getClienteById } from '@/lib/queries';

type PageProps = {
  params: { id: string };
};

export default async function SocioDetallePage({ params }: PageProps) {
  const socio = await getClienteById(parseInt(params.id, 10));

  return (
    <div className="max-w-3xl">
      <div className="flex items-center justify-between mb-6">
        <h1 className="page-title">Detalle Socio</h1>
        <div className="flex gap-2">
          <Link href={`/socios/${params.id}/editar`} className="btn-primary">
            Editar
          </Link>
          <Link href="/socios" className="btn-secondary">
            Volver
          </Link>
        </div>
      </div>

      <div className="card">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <div className="text-xs text-gray-500">RUT</div>
            <div className="font-mono">{socio?.rut_cliente || '-'}</div>
          </div>
          <div>
            <div className="text-xs text-gray-500">ID</div>
            <div>{socio?.Id_cliente ?? '-'}</div>
          </div>
          <div className="md:col-span-2">
            <div className="text-xs text-gray-500">Nombre</div>
            <div className="font-medium">{socio?.nombre_cliente || '-'}</div>
          </div>
          <div className="md:col-span-2">
            <div className="text-xs text-gray-500">Dirección</div>
            <div>{socio?.direccion || '-'}</div>
          </div>
          <div>
            <div className="text-xs text-gray-500">Sector</div>
            <div>{socio?.nombre_sector || '-'}</div>
          </div>
          <div>
            <div className="text-xs text-gray-500">Estado</div>
            <div>{socio?.nombre_estado || socio?.estado_socio || '-'}</div>
          </div>
          <div>
            <div className="text-xs text-gray-500">Número Medidor</div>
            <div>{socio?.numero_medidor || '-'}</div>
          </div>
          <div>
            <div className="text-xs text-gray-500">Tipo Medidor</div>
            <div>{socio?.tipo_caneria || '-'}</div>
          </div>
        </div>
      </div>
    </div>
  );
}