// import React from 'react'

import { CiPhone } from "react-icons/ci"
import { IoIosPhonePortrait } from "react-icons/io"
import { MdOutlineEmail } from "react-icons/md"

export default function HomeCom() {
  return (
    <div className="w-full h-screen flex flex-col gap-2 overflow-y-auto text-black bg-slate-100 p-5 sm:p-[40px]">
      <div className="py-4 text-3xl text-black font-bold">Users</div>
      <div className="grid gap-5 sm:gap-[40px] grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

        {data.map((item, index) => {
          let color = item.place == 'Friends' ? 'text-emerald-500 bg-emerald-100/90' : item.place == 'Office' ? 'text-blue-500 bg-blue-100/90' : 'text-orange-500 bg-orange-100/90'
          return (
            <div key={index} className="w-full rounded p-3 sm:p-5 bg-white shadow flex flex-col gap-5 hover:scale-105 hover:cursor-pointer">
              <div className="mb-5 card-title w-[70%] mx-auto">
                <h1 className="mb-[1px] text-2xl font-bold">{item.name}</h1>
                <span className={` ${color} text-sm font-bold p-1 rounded`}>{item.place}</span>
              </div>
              <div className="card-body flex flex-col gap-2">
                <div className="contact text-slate-700 flex gap-3 items-center">
                  <span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
                    <IoIosPhonePortrait />
                  </span>
                  <span>{item.contact}</span>
                </div>
                <div className="contact text-slate-700 flex gap-3 items-center">
                  <span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
                    <CiPhone />
                  </span>
                  <span>{item.contact}</span>
                </div>
                <div className="contact text-slate-700 flex gap-3 items-center">
                  <span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
                    <MdOutlineEmail />
                  </span>
                  <span>{item.email}</span>
                </div>
              </div>
            </div>
          )
        })}

      </div>
    </div>
  )
}





const data = [
  {name:'Jerry Eze', place: 'Home', contact: '021-025-0325', email: 'jerry@example.com'},
  {name:'Mark John', place: 'Office', contact: '011-025-0311', email: 'mark@example.com'},
  {name:'Larry Bon', place: 'Friends', contact: '033-025-0333', email: 'larry@example.com'},
  {name:'Jeff Henry', place: 'Home', contact: '044-025-0344', email: 'jeff@example.com'},
  {name:'Rose Ordor', place: 'Office', contact: '055-025-0355', email: 'rose@example.com'},
  {name:'Mike Timothy', place: 'Friends', contact: '066-025-0366', email: 'mike@example.com'},

  {name:'Jerry Eze', place: 'Home', contact: '021-025-0325', email: 'jerry@example.com'},
  {name:'Mark John', place: 'Office', contact: '011-025-0311', email: 'mark@example.com'},
  {name:'Larry Bon', place: 'Friends', contact: '033-025-0333', email: 'larry@example.com'},
  {name:'Jeff Henry', place: 'Home', contact: '044-025-0344', email: 'jeff@example.com'},
  {name:'Rose Ordor', place: 'Office', contact: '055-025-0355', email: 'rose@example.com'},
  {name:'Mike Timothy', place: 'Friends', contact: '066-025-0366', email: 'mike@example.com'},

  {name:'Jerry Eze', place: 'Home', contact: '021-025-0325', email: 'jerry@example.com'},
  {name:'Mark John', place: 'Office', contact: '011-025-0311', email: 'mark@example.com'},
  {name:'Larry Bon', place: 'Friends', contact: '033-025-0333', email: 'larry@example.com'},
  {name:'Jeff Henry', place: 'Home', contact: '044-025-0344', email: 'jeff@example.com'},
  {name:'Rose Ordor', place: 'Office', contact: '055-025-0355', email: 'rose@example.com'},
  {name:'Mike Timothy', place: 'Friends', contact: '066-025-0366', email: 'mike@example.com'},

]