{
  "name": "schedule-service-card",
  "title": "ScheduleServiceCard",
  "description": "Service card with next available time slot pills.",
  "type": "component",
  "registryDependencies": [
    "price",
    "cn",
    "strip-html"
  ],
  "files": [
    {
      "path": "cards/schedule-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 { getProductCurrency } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\nimport { formatDuration } from \"../utils/format-duration\";\n\nexport function ScheduleServiceCard({\n  product,\n  slots,\n  onBook,\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 href = `/products/${product.slug}`;\n  const durationLabel = product.duration_minutes != null\n    ? formatDuration(product.duration_minutes, product.duration_unit)\n    : null;\n\n  const displaySlots = (slots || []).slice(0, 3);\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    \"transition-all duration-300 ease-[cubic-bezier(0.19,1,0.22,1)]\",\n    \"hover:-translate-y-1 hover:shadow-[0_2px_6px_rgba(0,0,0,0.04),0_12px_40px_rgba(0,0,0,0.10)]\",\n    className,\n  );\n\n  const inner = (\n    <div className=\"p-4\">\n      <div className=\"flex items-start justify-between gap-3\">\n        <div className=\"flex-1 min-w-0\">\n          <h3 className=\"text-[14.5px] font-bold text-foreground leading-snug tracking-tight\">\n            {product.name}\n          </h3>\n          <p className=\"text-[12.5px] text-muted-foreground mt-0.5\">\n            {durationLabel && <>{durationLabel} · </>}\n            <Price amount={product.default_price} currency={currency} />\n          </p>\n        </div>\n        {image && (\n          <div className=\"w-14 h-14 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            ) : (\n              <img src={image} alt={product.name} className=\"w-full h-full object-cover\" />\n            )}\n          </div>\n        )}\n      </div>\n\n      {product.description && (\n        <p className=\"text-[12px] text-muted-foreground mt-2 line-clamp-2 leading-relaxed\">\n          {stripHtmlToText(product.description)}\n        </p>\n      )}\n\n      {displaySlots.length > 0 && (\n        <div className=\"mt-4 pt-3 border-t border-border\">\n          <p className=\"text-[10px] font-semibold text-muted-foreground uppercase tracking-widest mb-2\">\n            {product.general_service_capacity != null && product.general_service_capacity > 1\n              ? \"Upcoming classes\"\n              : \"Next available\"\n            }\n          </p>\n          <div className=\"flex gap-2 flex-wrap\">\n            {displaySlots.map((slot, i) => (\n              <button\n                key={i}\n                onClick={(e) => { e.preventDefault(); e.stopPropagation(); onBook?.(product); }}\n                className={cn(\n                  \"text-[12.5px] font-medium px-3 py-1.5 rounded-lg transition-all duration-200 ease-out hover:scale-[1.04]\",\n                  i === 0\n                    ? \"bg-primary text-primary-foreground font-semibold shadow-sm\"\n                    : \"bg-muted text-foreground hover:bg-muted/80\",\n                )}\n              >\n                {new Date(slot.start_time).toLocaleString(undefined, {\n                  weekday: \"short\",\n                  hour: \"numeric\",\n                  minute: \"2-digit\",\n                })}\n              </button>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n\n  if (renderLink) {\n    return renderLink({ href, className: shellClass, children: inner });\n  }\n\n  return <a href={href} className={shellClass} data-cimplify-card>{inner}</a>;\n}\n"
    }
  ]
}