mstfyldz/components/Header.tsx

"use client";

import React, { useState, useEffect } from "react";
import { Search, Sparkles, Plus, Dices, Feather, Clock } from "lucide-react";

interface HeaderProps {
  searchQuery: string;
  onSearchChange: (q: string) => void;
  onNewPostClick: () => void;
  onRandomPostClick: () => void;
  postCount: number;
}

export const Header: React.FC<HeaderProps> = ({
  searchQuery,
  onSearchChange,
  onNewPostClick,
  onRandomPostClick,
  postCount,
}) => {
  const [timeString, setTimeString] = useState<string>("16:20");

  useEffect(() => {
    const updateTime = () => {
      const now = new Date();
      setTimeString(
        now.toLocaleTimeString("tr-TR", {
          hour: "2-digit",
          minute: "2-digit",
        })
      );
    };
    updateTime();
    const timer = setInterval(updateTime, 30000);
    return () => clearInterval(timer);
  }, []);

  return (
    <header className="w-full border-b border-[#18181B]/10 bg-[#FAF7F2]/80 backdrop-blur-md sticky top-0 z-30 transition-colors">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-3.5 flex flex-col md:flex-row items-center justify-between gap-4">
        {/* Brand & Identity */}
        <div className="flex items-center gap-3.5 w-full md:w-auto justify-between md:justify-start">
          <div className="flex items-center gap-2.5">
            <div className="w-9 h-9 rounded-full bg-[#18181B] text-[#FAF7F2] flex items-center justify-center font-heading font-black text-lg shadow-sm border border-[#18181B]/20">
              M
            </div>
            <div>
              <div className="flex items-center gap-2">
                <span className="font-heading font-extrabold text-xl tracking-tight text-[#18181B]">
                  mstfyldz
                </span>
                <span className="text-[11px] font-mono uppercase px-2 py-0.5 rounded bg-[#18181B]/5 text-[#18181B]/70 border border-[#18181B]/10">
                  v1.0 log
                </span>
              </div>
              <p className="text-xs font-handwritten text-[#787D89] text-base leading-none mt-0.5">
                Mustafa Yıldız • Kişisel Karalama &amp; Mood Defteri
              </p>
            </div>
          </div>

          {/* Mobile CTAs */}
          <div className="flex items-center gap-2 md:hidden">
            <button
              onClick={onRandomPostClick}
              title="Rastgele Bir Not Aç"
              aria-label="Rastgele Bir Not Aç"
              className="p-2 rounded-lg bg-[#FAF7F2] border border-[#18181B]/15 text-[#18181B] hover:bg-[#F0ECE1] transition-all shadow-xs"
            >
              <Dices className="w-4 h-4" />
            </button>
            <button
              onClick={onNewPostClick}
              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#E11D48] text-white text-xs font-heading font-bold shadow-xs hover:bg-[#9F1239] transition-all"
            >
              <Plus className="w-3.5 h-3.5" />
              <span>Karala</span>
            </button>
          </div>
        </div>

        {/* Telemetry & Search & Actions */}
        <div className="flex items-center gap-3 w-full md:w-auto justify-end">
          {/* Live Telemetry Pill */}
          <div className="hidden lg:flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#F3ECE2] border border-[#18181B]/10 text-[11px] font-mono text-[#52525B]">
            <span className="w-2 h-2 rounded-full bg-[#059669] animate-pulse" />
            <span>Muğla, TR</span>
            <span>•</span>
            <div className="flex items-center gap-1">
              <Clock className="w-3 h-3 text-[#787D89]" />
              <span>{timeString}</span>
            </div>
            <span>•</span>
            <span>{postCount} Not Kayıtlı</span>
          </div>

          {/* Search Box */}
          <div className="relative flex-1 md:w-56">
            <Search className="w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2 text-[#787D89]" />
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => onSearchChange(e.target.value)}
              placeholder="Defterde ara..."
              className="w-full pl-8 pr-3 py-1.5 text-xs bg-white/70 border border-[#18181B]/15 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#E11D48]/30 focus:border-[#E11D48] transition-all placeholder:text-[#A6ABB5] font-serif"
            />
            {searchQuery && (
              <button
                onClick={() => onSearchChange("")}
                className="absolute right-2.5 top-1/2 -translate-y-1/2 text-xs text-[#787D89] hover:text-[#18181B]"
              >
                &times;
              </button>
            )}
          </div>

          {/* Desktop Actions */}
          <div className="hidden md:flex items-center gap-2">
            <button
              onClick={onRandomPostClick}
              className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#FAF7F2] border border-[#18181B]/15 text-[#18181B] text-xs font-heading font-medium hover:bg-[#F0ECE1] hover:shadow-xs transition-all cursor-pointer"
            >
              <Dices className="w-3.5 h-3.5 text-[#D97706]" />
              <span>Rastgele Not</span>
            </button>

            <button
              onClick={onNewPostClick}
              className="flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg bg-[#E11D48] text-white text-xs font-heading font-bold hover:bg-[#9F1239] shadow-xs hover:shadow transition-all cursor-pointer"
            >
              <Feather className="w-3.5 h-3.5" />
              <span>+ Yeni Düşünce</span>
            </button>
          </div>
        </div>
      </div>
    </header>
  );
};