import { IoFastFood } from "react-icons/io5";
import { FaTshirt } from "react-icons/fa";
import { GiHealthNormal } from "react-icons/gi";
import { GiSchoolBag } from "react-icons/gi";


const Categoris = () => {
  return (
    <div className="overflow-x-auto whitespace-nowrap flex w-full items-center gap-3 scrollbar-hide">
      <ComponentCategori 
      icon={<GiHealthNormal />}
      name="Healths"
      />
      <ComponentCategori 
      icon={<IoFastFood />}
      name="Food & Drinks"
      />
      <ComponentCategori 
      icon={<IoFastFood />}
      name="Food & Drinks"
      />
      <ComponentCategori 
      icon={<IoFastFood />}
      name="Food & Drinks"
      />
      <ComponentCategori 
      icon={<IoFastFood />}
      name="Food & Drinks"
      />
       <ComponentCategori 
      icon={<FaTshirt />}
      name="Tshirts"
      />
       <ComponentCategori 
      icon={<GiSchoolBag />}
      name="Bags"
      />
    </div>
  );
};

const ComponentCategori = (props) => {
  const {icon, name} = props
return (
  <>
    <button className="flex items-center gap-2 border-2 p-1 px-2 rounded-lg border-[#AFA0D7] ">
      {icon}
      <h1>{name}</h1>
    </button>
  </>
);
};


export default Categoris;
