import { useNavigate } from 'react-router-dom'
import { Box, ArrowRight } from 'lucide-react'
import { getTreeNavigatePath } from '@/lib/routing'
import type { SuggestedFlow } from '@/types/copilot'

interface SuggestedFlowCardProps {
  flow: SuggestedFlow
}

export function SuggestedFlowCard({ flow }: SuggestedFlowCardProps) {
  const navigate = useNavigate()

  const handleClick = () => {
    const path = getTreeNavigatePath(flow.tree_id, flow.tree_type)
    navigate(path)
  }

  return (
    <button
      onClick={handleClick}
      className="w-full text-left card-flat p-3 rounded-xl hover:border-[#2a2f3d] transition-colors group"
    >
      <div className="flex items-start gap-2">
        <Box size={14} className="text-[#22d3ee] mt-0.5 shrink-0" />
        <div className="min-w-0 flex-1">
          <div className="flex items-center gap-1.5">
            <span className="text-[0.8125rem] font-medium text-[#e2e5eb] truncate">
              {flow.tree_name}
            </span>
            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#848b9b]">
              {flow.tree_type}
            </span>
          </div>
          <p className="text-[0.75rem] text-[#848b9b] mt-0.5 line-clamp-2">
            {flow.relevance_snippet}
          </p>
        </div>
        <ArrowRight size={14} className="text-[#848b9b] group-hover:text-[#22d3ee] transition-colors shrink-0 mt-0.5" />
      </div>
    </button>
  )
}