import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select";
import { FaEdit, FaTrash, FaEye } from "react-icons/fa";

const Clientes = () => {
  return (
    <div className="p-6">
      <h1 className="text-3xl font-bold mb-6">Clientes</h1>

      {/* Filtros */}
      <div className="flex flex-wrap gap-4 mb-6">
        <Input placeholder="Buscar por nome..." className="w-full md:w-1/3" />
        <Select>
          <SelectTrigger className="w-full md:w-1/4">
            <SelectValue placeholder="Cidade" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="sao_paulo">São Paulo</SelectItem>
            <SelectItem value="jandira">Jandira</SelectItem>
            <SelectItem value="barueri">Barueri</SelectItem>
          </SelectContent>
        </Select>
        <Select>
          <SelectTrigger className="w-full md:w-1/4">
            <SelectValue placeholder="Status" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="ativo">Ativo</SelectItem>
            <SelectItem value="inativo">Inativo</SelectItem>
          </SelectContent>
        </Select>
        <Button className="bg-blue-600 hover:bg-blue-700 w-full md:w-auto">Buscar</Button>
      </div>

      {/* Cards de Clientes */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {[...Array(6)].map((_, index) => (
          <Card key={index} className="hover:shadow-2xl transition-shadow">
            <CardContent className="p-4">
              <h2 className="text-xl font-semibold mb-2">Construtora ABC</h2>
              <p className="text-gray-600">Telefone: (11) 98765-4321</p>
              <p className="text-gray-600">Cidade: São Paulo</p>
              <p className="text-gray-600 mb-4">Status: <span className="text-green-600 font-semibold">Ativo</span></p>

              <div className="flex gap-2">
                <Button variant="outline" className="flex items-center gap-2">
                  <FaEye /> Ver
                </Button>
                <Button variant="outline" className="flex items-center gap-2 text-blue-600 border-blue-600">
                  <FaEdit /> Editar
                </Button>
                <Button variant="outline" className="flex items-center gap-2 text-red-600 border-red-600">
                  <FaTrash /> Excluir
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
};

export default Clientes;