"use client";

import Logo from "@/components/Logo";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Card } from "@/components/ui/card";
import { Bell, Calendar, Message } from "@mynaui/icons-react";
import { useEffect, useState } from "react";

export default function AppHeaders5() {
  const [greeting, setGreeting] = useState("");

  useEffect(() => {
    const hour = new Date().getHours();
    if (hour < 12) setGreeting("Good Morning");
    else if (hour < 18) setGreeting("Good Afternoon");
    else setGreeting("Good Evening");
  }, []);

  return (
    <header className="border-b bg-background px-6 py-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-6">
          <Logo />
          <h1 className="hidden text-lg font-medium text-muted-foreground md:block md:text-xl">
            {greeting},{" "}
            <span className="font-semibold text-foreground">Praveen!</span>
          </h1>
        </div>

        {/* User Profile */}
        <div className="flex items-center gap-3">
          <div className="relative">
            <Bell className="size-5 text-muted-foreground hover:text-foreground" />
            <span className="absolute -top-1 right-0 flex size-3 items-center justify-center rounded-full bg-red-500 text-[8px] font-medium text-white">
              2
            </span>
          </div>
          <Avatar className="size-8">
            <AvatarImage src="https://github.com/shadcn.png" alt="Praveen" />
            <AvatarFallback>PJ</AvatarFallback>
          </Avatar>
        </div>
      </div>

      {/* Summary Cards */}
      <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3">
        <Card className="flex items-center gap-3 p-4">
          <div className="flex size-10 items-center justify-center rounded-full bg-blue-50">
            <Calendar className="size-5 text-blue-600" />
          </div>
          <div>
            <div className="text-sm font-medium">Tasks Due Today</div>
            <div className="flex items-center gap-1">
              <span className="text-2xl font-semibold text-blue-600">3</span>
              <span className="text-sm text-muted-foreground">tasks</span>
            </div>
          </div>
        </Card>

        <Card className="flex items-center gap-3 p-4">
          <div className="flex size-10 items-center justify-center rounded-full bg-violet-50">
            <Message className="size-5 text-violet-600" />
          </div>
          <div>
            <div className="text-sm font-medium">New Messages</div>
            <div className="flex items-center gap-1">
              <span className="text-2xl font-semibold text-violet-600">2</span>
              <span className="text-sm text-muted-foreground">unread</span>
            </div>
          </div>
        </Card>

        <Card className="flex items-center gap-3 p-4 sm:col-span-2 md:col-span-1">
          <div className="flex size-10 items-center justify-center rounded-full bg-orange-50">
            <Calendar className="size-5 text-orange-600" />
          </div>
          <div>
            <div className="text-sm font-medium">Upcoming Meetings</div>
            <div className="flex items-center gap-1">
              <span className="text-2xl font-semibold text-orange-600">1</span>
              <span className="text-sm text-muted-foreground">today</span>
            </div>
          </div>
        </Card>
      </div>
    </header>
  );
}
App Headers
