/**
 * 知识条目卡片组件
 *
 * 展示单个标杆实践（知识资产）的模块、标杆门店、关键行动和验证指标。
 */
import { ShieldCheck, ChevronRight } from 'lucide-react'
import { Badge } from '@/components/Badge'

interface KnowledgeCardProps {
  practice: any
  onClick?: () => void
}

/** 状态颜色映射 */
const STATUS_BADGE: Record<string, 'default' | 'status' | 'review'> = {
  '待推广': 'default',
  '推广中': 'status',
  '已推广': 'review',
}

export function KnowledgeCard({ practice, onClick }: KnowledgeCardProps) {
  return (
    <div
      className="flex cursor-pointer items-center gap-3 rounded-lg border bg-card p-3 transition-shadow hover:shadow-sm"
      onClick={onClick}
    >
      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-teal-50">
        <ShieldCheck className="h-5 w-5 text-teal-600" />
      </div>

      <div className="min-w-0 flex-1">
        <div className="flex items-center gap-2">
          <span className="rounded bg-teal-50 px-1.5 py-0.5 text-[10px] font-medium text-teal-700">
            {practice.practice_module}
          </span>
          <Badge type={STATUS_BADGE[practice.status] || 'default'} text={practice.status} />
        </div>
        <p className="mt-1 truncate text-sm font-medium">
          {practice.key_actions?.substring(0, 60) || '未填写关键行动'}
          {practice.key_actions?.length > 60 ? '…' : ''}
        </p>
        <p className="mt-0.5 truncate text-xs text-muted-foreground">
          标杆门店: {practice.benchmark_store_name || '-'}
        </p>
      </div>

      <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" />
    </div>
  )
}