"use client";

import { ChevronRight, Info } from "lucide-react";
import { Button } from "@/components/ui/button";

interface PageHeaderProps {
  projectId: string;
  projectName?: string;
  projectEmoji?: string;
  pageName: string;
}

export function PageHeader({
  projectId,
  projectName = "AI Proxy",
  projectEmoji = "🤖",
  pageName,
}: PageHeaderProps) {
  return (
    <div className="flex h-12 items-center justify-between border-b bg-card/50 px-6">
      {/* Breadcrumbs */}
      <div className="flex items-center gap-2 text-sm">
        <span className="text-base">{projectEmoji}</span>
        <span className="font-medium">{projectName}</span>
        <ChevronRight className="h-4 w-4 text-muted-foreground" />
        <span className="text-muted-foreground">{pageName}</span>
      </div>

      {/* Actions */}
      <div className="flex items-center gap-2">
        <Button variant="ghost" size="icon" className="h-8 w-8">
          <Info className="h-4 w-4" />
        </Button>
      </div>
    </div>
  );
}