'use client'

import React from 'react'
import { Search, ArrowRight } from 'lucide-react'

export interface CommandResultItemProps {
  icon?: React.ElementType
  label: string
  detail?: string
  shortcut?: string
  selected: boolean
  /** Color class for icon container, e.g. 'bg-blue-100 text-blue-600' */
  colorClass?: string
  /** Whether to show a trailing arrow (for navigation items) */
  showArrow?: boolean
  onClick: () => void
}

export function CommandResultItem({
  icon,
  label,
  detail,
  shortcut,
  selected,
  colorClass = 'bg-gray-100 text-gray-600',
  showArrow = false,
  onClick,
}: CommandResultItemProps) {
  const Icon = icon || Search

  return (
    <div
      role="option"
      aria-selected={selected}
      className={`flex items-center gap-3 px-4 py-3 cursor-pointer ${
        selected ? 'bg-blue-50' : 'hover:bg-gray-50'
      }`}
      onClick={onClick}
    >
      <div
        className={`w-8 h-8 rounded-full flex items-center justify-center ${colorClass}`}
      >
        <Icon className="w-4 h-4" />
      </div>
      <div className="flex-1">
        <p className={detail ? 'font-medium text-gray-900' : 'font-medium text-gray-700'}>
          {label}
        </p>
        {detail && <p className="text-sm text-gray-500">{detail}</p>}
      </div>
      {shortcut && (
        <kbd className="px-2 py-1 bg-gray-100 text-gray-500 text-xs rounded font-mono">
          {shortcut}
        </kbd>
      )}
      {showArrow && <ArrowRight className="w-4 h-4 text-gray-400" />}
    </div>
  )
}