"use client"
import React, { useState } from "react";
import Image from 'next/image';
import Link from 'next/link';
import { IoCloseOutline } from "react-icons/io5";
import { HiBars2 } from "react-icons/hi2";
import Hero from "./Hero";


const Header = () => {
    const text = "Donut worry about things";
    const Letter = text.split("");

    const [nav, setNav] = useState(false);
    

  return (
    <div className='w-full bg-[#FDE2DE]'>
        <div className='flex flex-row justify-between md:flex-col gap-14 items-center py-5 md:py-10 px-5 md:px-8 lg:px-10'>
            <div className='flex justify-center relative px-4'>
                <div className='mt-5 md:mt3 flex flex-col items-center'>
                    <Image src='/logo.png' width={120} height={120} alt='' className='w-[100px]'/>
                </div>
                <div className='circle absolute mt-10'>
                    {Letter.map((item, index) => {
                        return (
                        <span key={index} className="letter inline-block absolute -top-[50px] md:-top-[70px] text-xs text-[#95743D]" style={{transform: `rotate(${index * 14.5}deg)`}}>{item}</span>
                        );
                    })}
                </div>
            </div>
            <div className="flex justify-end md:justify-center items-center w-full text-white">
                <ul className="hidden md:flex border border-[#E78895] rounded-full text-xs font-semibold uppercase text-[#95743D]">
                    <Link href='/' className="px-4 py-2 relative hover:text-[#FDE2DE] hover:bg-[#E78895] rounded-full duration-300">Home</Link>
                    <Link href='' className="px-4 py-2 relative hover:text-[#FDE2DE] hover:bg-[#E78895] rounded-full duration-300">Menu</Link>
                    <Link href='' className="px-4 py-2 relative hover:text-[#FDE2DE] hover:bg-[#E78895] rounded-full duration-300">about</Link>
                    <Link href='' className="px-4 py-2 relative hover:text-[#FDE2DE] hover:bg-[#E78895] rounded-full duration-300">contact</Link>
                    <Link href='' className="px-4 py-2 relative hover:text-[#FDE2DE] hover:bg-[#E78895] rounded-full duration-300">login</Link>
                </ul>
                <div onClick={() => setNav(!nav)} className="cursor-pointer pr-4 z-20 text-[#95743D] md:hidden "> {nav ? <IoCloseOutline size={30} /> : <HiBars2 size={30} />}</div>
                {nav && (
                    <ul className="w-full h-screen flex justify-center items-center text-center absolute top-0 left-0  bg-gradient-to-b from-[#f8cdc6] to-[#FDE2DE] text-[#95743D] z-10">
                        <li onClick={() => setNav(!nav)} className="flex flex-col gap-4 cursor-pointer capitalize text-3xl">
                            <Link  href='/'>Home</Link>
                            <Link  href=''>menu</Link>
                            <Link  href=''>about</Link>
                            <Link  href=''>contact</Link>
                            <Link  href=''>login</Link>
                        </li>        
                    </ul>
                )}
            </div>
        </div>
    </div>
  )
}

export default Header