src/components/workshop/ServiceTaskCard.tsx

import type { LucideIcon } from 'lucide-react'

interface ServiceTaskCardProps {
  icon: LucideIcon
  title: string
  description: string
  status?: 'idle' | 'active'
}

function ServiceTaskCard({ icon: Icon, title, description, status = 'idle' }: ServiceTaskCardProps) {
  return (
    <div className="bg-[#191919] border border-[#2E2E2E] rounded-xl p-4 hover:border-[#4A4A4A] transition-colors">
      <div className="flex items-center justify-between mb-2">
        <div className="w-9 h-9 rounded-lg bg-[#FF9D00]/10 flex items-center justify-center">
          <Icon size={18} className="text-[#FF9D00]" />
        </div>
        {status === 'active' ? (
          <span className="text-[10px] font-semibold uppercase tracking-wide text-[#4ADE80] bg-[#4ADE80]/10 px-2 py-0.5 rounded-full">
            Ready
          </span>
        ) : null}
      </div>
      <h3 className="text-sm font-semibold text-white mb-1">{title}</h3>
      <p className="text-xs text-[#8B8B8B] leading-relaxed">{description}</p>
    </div>
  )
}

export default ServiceTaskCard