"use client"

import { Card, CardContent } from "@/components/ui/card"
import { UserRound } from "lucide-react"
import { CustomerListItem } from "./CustomerListItem"
import { CustomersListSkeleton } from "./CustomersListSkeleton"
import type { Client } from "@/types/clients"
import { useTranslations } from "next-intl"

interface CustomerListProps {
  customers: Client[]
  isLoading?: boolean
}

export function CustomersList({ customers, isLoading = false }: CustomerListProps) {
  const t = useTranslations()

  if (isLoading) {
    return <CustomersListSkeleton />
  }

  return (
    <Card>
      <CardContent className="p-4">
        {customers.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-16 text-center text-gray-500">
            <UserRound size={48} className="mb-4 text-gray-300" />
            <h3 className="font-semibold text-lg mb-2 text-gray-700">{t("customers.emptyState.title")}</h3>
            <p className="text-sm">{t("customers.emptyState.description")}</p>
          </div>
        ) : (
          <>
            {customers.map(customer => (
              <CustomerListItem key={customer.clientId} customer={customer} />
            ))}
          </>
        )}
      </CardContent>
    </Card>
  )
}