"use client"

import { Input } from "@/components/ui/input"
import { AppWindow, ClipboardEdit, FileText, ListTree, ScrollText, ShieldCheck, Tag, UserCog, Wallet } from "lucide-react"
import Link from "next/link"

const HomeView = () => {
    const menus = [
        {
            title: "TECL Balance Adjusment",
            url: "#",
            icon: <Wallet/>
        },
        {
            title: "Price Plan",
            url: "main/price-plan",
            icon: <FileText/>

        },
        {
            title: "Offer",
            url: "#",
            icon: <Tag/>
        },
        {
            title: "Order Entry",
            url: "#",
            icon: <ClipboardEdit/>

        },
        {
            title: "Role Management",
            url: "#",
            icon: <ShieldCheck/>
        },
        {
            title: "User Management",
            url: "#",
            icon: <UserCog/>
        },
        {
            title: "Directory Menu Management",
            url: "#",
            icon: <ListTree/>
        },
        {
            title: "Portal Management",
            url: "#",
            icon: <AppWindow/>
        },
        {
            title: "Log Management",
            url: "#",
            icon: <ScrollText/>
        },
    ]
    return (
        <div className="px-10 mt-[60px]">
            <div className="flex justify-between items-center">
                <div>
                    <h1 className="text-black-100 text-3xl">Welcome to Network Admin Portal!</h1>
                    <h3 className="text-black-70">Manage your network infrastructure efficiently.</h3>
                </div>
                <Input
                    id="search"
                    placeholder="Search..."
                    className="border border-black-90 rounded-md w-[300px] px-4 py-2 focus:outline-none"
                    type="text"
                    name="search"
                    autoComplete="off"
                />
            </div>
            <div className="mt-[60px] grid grid-cols-3 gap-y-4">
                {menus.map((item, index) => {
                    return (
                        <Link href={item.url} key={index} className="bg-white p-4 shadow-md rounded-md max-w-[350px]">
                            <div className="w-[50px] h-[50px] flex justify-center items-center bg-[#00879E1F] mb-5">
                                {item.icon}
                            </div>
                            <span className="text-xl">{item.title}</span>
                            <p className="font-light">Lorem ipsum dolor sit amet</p>
                        </Link>
                    );
                })}
            </div>
        </div>
    )
}

export default HomeView