'use client'

import { Crosshair } from '@phosphor-icons/react'
import { MethodBadge } from '../../shared/method-badge'
import type { EndpointContextCardData } from './types'
import { cn } from '@/lib/utils'

interface EndpointContextCardProps {
  endpoint: EndpointContextCardData['endpoint']
}

export function EndpointContextCard({ endpoint }: EndpointContextCardProps) {
  return (
    <div 
      className={cn(
        "fade-in slide-in-from-bottom-1 animate-in duration-150",
        "mx-auto w-full max-w-[var(--thread-max-width)] px-2 py-2"
      )}
    >
      <div className="rounded-lg border border-border/60 bg-muted/20 overflow-hidden">
        {/* Header */}
        <div className="flex items-center gap-2 px-3 py-2 bg-muted/30 border-b border-border/40">
          <Crosshair className="h-3.5 w-3.5 text-muted-foreground" weight="bold" />
          <span className="text-xs font-medium text-muted-foreground">Asking about</span>
        </div>
        
        {/* Content */}
        <div className="p-3">
          <div className="flex items-start gap-3">
            <MethodBadge method={endpoint.method} size="sm" />
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-foreground truncate">
                {endpoint.name}
              </p>
              <code className="text-xs text-muted-foreground font-mono block truncate mt-0.5">
                {endpoint.path}
              </code>
              {endpoint.description && (
                <p className="text-xs text-muted-foreground mt-1.5 line-clamp-2">
                  {endpoint.description}
                </p>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
