'use client'

import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import { useRouter } from "next/navigation"

interface CowHeaderProps {
  from?: string | null
}

export function CowHeader({ from }: CowHeaderProps) {
  const router = useRouter()

  const handleBack = () => {
    if (from === 'ranking') {
      router.push('/ranking')
    } else if (from === 'list') {
      router.push('/list')
    } else {
      router.push('/cow')
    }
  }

  return (
    <div className="space-y-4">
      {/* 뒤로가기 버튼 */}
      <Button
        onClick={handleBack}
        variant="ghost"
        size="sm"
        className="text-muted-foreground hover:text-foreground hover:bg-muted -ml-2 gap-1.5"
      >
        <ArrowLeft className="h-4 w-4" />
        <span className="text-sm">목록으로</span>
      </Button>

      {/* 페이지 헤더 카드 */}
      <div className="rounded-lg p-6 border bg-slate-50">
        <h1 className="text-2xl font-bold mb-2">개체 상세 정보</h1>
        <p className="text-sm text-muted-foreground">개체의 기본 정보와 분석 현황을 확인할 수 있습니다.</p>
      </div>
    </div>
  )
}
