import { GitFork } from 'lucide-react'
import { cn } from '@/lib/utils'
import type { ForkPointResponse } from '@/types/branching'

interface ForkCardProps {
  fork: ForkPointResponse
  selectedBranchId: string | null
  onSelectOption: (branchId: string) => void
}

export function ForkCard({ fork, selectedBranchId, onSelectOption }: ForkCardProps) {
  return (
    <div className="rounded-lg border border-default bg-card p-4 flex flex-col gap-3">
      {/* Header */}
      <div className="flex items-center gap-2">
        <GitFork size={16} className="text-accent shrink-0" />
        <span className="text-[10px] font-semibold uppercase tracking-wider text-accent-text">
          Fork Point
        </span>
      </div>

      {/* Fork reason */}
      <p className="text-sm text-heading leading-snug">{fork.fork_reason}</p>

      {/* Options */}
      <div className="flex flex-col gap-2">
        {fork.options.map((option) => {
          const isSelected = option.branch_id === selectedBranchId
          return (
            <button
              key={option.branch_id}
              type="button"
              onClick={() => onSelectOption(option.branch_id)}
              className={cn(
                'w-full text-left rounded-[5px] border px-3 py-2.5 transition-colors',
                'hover:bg-elevated',
                isSelected
                  ? 'border-accent bg-accent-dim'
                  : 'border-default bg-elevated/50'
              )}
            >
              <p
                className={cn(
                  'text-sm font-medium',
                  isSelected ? 'text-accent-text' : 'text-heading'
                )}
              >
                {option.label}
              </p>
              {option.description && (
                <p className={cn(
                  'text-xs mt-0.5 leading-snug',
                  isSelected ? 'text-primary' : 'text-primary'
                )}>
                  {option.description}
                </p>
              )}
            </button>
          )
        })}
      </div>
    </div>
  )
}