"use client"

import * as React from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ArrowLeft, Eye, Download, Settings } from "lucide-react"
import { InformationButton } from "@/components/information/information-button"

interface GtcClausesPageHeaderProps {
  document: any // GtcDocumentWithRelations 타입
}

export function GtcClausesPageHeader({ document }: GtcClausesPageHeaderProps) {
  const router = useRouter()

  const handleBack = () => {
    router.push('/evcp/gtc')
  }


  return (
    <div className="flex items-center justify-between">
      {/* 헤더 왼쪽 */}
      <div className="flex items-center gap-4">
        <Button 
          variant="ghost" 
          size="sm" 
          onClick={handleBack}
          className="gap-2"
        >
          <ArrowLeft className="h-4 w-4" />
          목록으로
        </Button>
        
        <div className="border-l border-border pl-4">
          <div className="flex items-center gap-2 mb-1">
            <h1 className="text-2xl font-bold tracking-tight">
              GTC 조항 관리
            </h1>
            <InformationButton pagePath="evcp/basic-contract-template/gtc/clauses" />
          </div>
          
          <div className="flex items-center gap-3 text-sm text-muted-foreground">
            <Badge variant={document.type === "standard" ? "default" : "secondary"}>
              {document.type === "standard" ? "표준" : "프로젝트"}
            </Badge>
            
            {document.project && (
              <>
                <span>•</span>
                <span>{document.project.name} ({document.project.code})</span>
              </>
            )}
            
            <span>•</span>
            <span>v{document.revision}</span>
            
            {document.fileName && (
              <>
                <span>•</span>
                <span>{document.fileName}</span>
              </>
            )}
          </div>
        </div>
      </div>

      {/* 헤더 오른쪽 - 액션 버튼들 */}
      <div className="flex items-center gap-2">
        {/* <Button variant="outline" size="sm" onClick={handlePreview}>
          <Eye className="mr-2 h-4 w-4" />
          미리보기
        </Button>
        
        <Button variant="outline" size="sm" onClick={handleDownload}>
          <Download className="mr-2 h-4 w-4" />
          다운로드
        </Button>
        
        <Button variant="outline" size="sm" onClick={handleSettings}>
          <Settings className="mr-2 h-4 w-4" />
          설정
        </Button> */}
      </div>
    </div>
  )
}