import { AlertCircle, Check, Users } from 'lucide-react';
import { useState } from 'react';
import ClientList from '../components/clients/ClientList';
import CreateClient from '../components/clients/CreateClient';
import Alert from '../components/Error';
import Header from '../components/Header';

const Clients = () => {
  const [alert, setAlert] = useState(null);
  const [clients, setClients] = useState(null);
  const [cargoId, setCargoId] = useState(null);

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 p-4 md:p-6 lg:p-8">
      <div className="max-w-6xl mx-auto">
        <Header Icon={Users} title={"Mijozlar Ro'yxati"} text={"Mijozlarni boshqarish va ro'yxatni yuritish tizimi"} />
        {alert && alert.type === 'success' ? <Alert Icon={Check} variant="success" message={alert.message} /> : alert && alert.type === 'warning' && <Alert Icon={AlertCircle} variant="warning" message={alert.message} />}
        <CreateClient clients={clients} setAlert={setAlert} cargoId={cargoId} />
        <ClientList alert={alert} setAlert={setAlert} setClients={setClients} setCargoId={setCargoId} />
      </div>
    </div>
  );
};

export default Clients;