{
  "name": "compact-service-card",
  "title": "CompactServiceCard",
  "description": "Horizontal service card with thumbnail for list views.",
  "type": "component",
  "registryDependencies": [
    "price",
    "cn",
    "strip-html"
  ],
  "files": [
    {
      "path": "cards/compact-service-card.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { stripHtmlToText } from \"@cimplify/sdk/react\";\nimport type { ServiceCardLayoutProps } from \"./standard-service-card\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { parsePrice, getProductCurrency } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nfunction formatDuration(minutes: number, unit?: string): string {\n  if (unit && unit !== \"minutes\") return `${minutes} ${unit}`;\n  if (minutes >= 60) {\n    const h = Math.floor(minutes / 60);\n    const m = minutes % 60;\n    return m > 0 ? `${h}h ${m}m` : `${h} hr`;\n  }\n  return `${minutes} min`;\n}\n\nexport function CompactServiceCard({\n  product,\n  renderImage,\n  renderLink,\n  className,\n}: ServiceCardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const currency = getProductCurrency(product);\n  const hasDeposit = product.deposit_type && product.deposit_type !== \"none\" && product.deposit_amount;\n  const hasBillingPlans = product.billing_plans && product.billing_plans.length > 0;\n  const href = `/products/${product.slug}`;\n\n  const content = (\n    <div className=\"flex items-center gap-4 p-3\">\n      {/* Thumbnail */}\n      <div className=\"w-[72px] h-[72px] rounded-xl overflow-hidden bg-muted shrink-0\">\n        {renderImage ? (\n          renderImage({ src: image, alt: product.name, className: \"w-full h-full object-cover\" })\n        ) : image ? (\n          <img src={image} alt={product.name} className=\"w-full h-full object-cover\" />\n        ) : null}\n      </div>\n\n      {/* Info */}\n      <div className=\"flex-1 min-w-0\">\n        <h3 className=\"text-[14px] font-semibold text-foreground leading-tight truncate\">\n          {product.name}\n        </h3>\n        {product.description && (\n          <p className=\"text-[12px] text-muted-foreground mt-0.5 truncate\">\n            {stripHtmlToText(product.description)}\n          </p>\n        )}\n        <div className=\"flex items-center gap-2 mt-2 flex-wrap\">\n          {product.duration_minutes != null && (\n            <span className=\"text-[10.5px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\">\n              {formatDuration(product.duration_minutes, product.duration_unit)}\n            </span>\n          )}\n          <span className=\"flex items-center gap-1 text-[10.5px] font-medium text-emerald-600\">\n            <span className=\"w-[6px] h-[6px] rounded-full bg-emerald-500\" />\n            Available\n          </span>\n          {hasDeposit && (\n            <span className=\"text-[10.5px] font-medium text-amber-600\">\n              <Price amount={product.deposit_amount!} currency={currency} /> deposit\n            </span>\n          )}\n          {hasBillingPlans && (\n            <span className=\"inline-flex items-center gap-0.5 text-[10.5px] font-semibold text-primary px-1.5 py-0.5 bg-primary/10 rounded\">\n              Subscription\n            </span>\n          )}\n        </div>\n      </div>\n\n      {/* Price + Chevron */}\n      <div className=\"flex items-center gap-2 shrink-0\">\n        <Price amount={product.default_price} currency={currency} className=\"text-sm font-bold\" />\n        <svg className=\"w-4 h-4 text-muted-foreground group-hover:text-primary transition-colors\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\">\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n        </svg>\n      </div>\n    </div>\n  );\n\n  const shellClass = cn(\n    \"group block text-left cursor-pointer bg-card rounded-[14px] overflow-hidden\",\n    \"shadow-[0_1px_3px_rgba(0,0,0,0.04),0_6px_24px_rgba(0,0,0,0.06)]\",\n    \"border border-transparent\",\n    \"transition-all duration-300 ease-[cubic-bezier(0.19,1,0.22,1)]\",\n    \"hover:-translate-y-[1px] hover:shadow-[0_2px_6px_rgba(0,0,0,0.04),0_12px_40px_rgba(0,0,0,0.10)] hover:border-primary/20\",\n    className,\n  );\n\n  if (renderLink) {\n    return renderLink({ href, className: shellClass, children: content });\n  }\n\n  return <a href={href} className={shellClass} data-cimplify-card>{content}</a>;\n}\n"
    }
  ]
}