'use client';

/**
 * FloatingProviderCard Component
 * 
 * Live UI card component representing certified doorstep beauticians and therapists.
 */

import React from 'react';
import Link from 'next/link';
import { Star, ShieldCheck, MapPin, Clock } from 'lucide-react';

export interface ProviderData {
  name: string;
  avatarText: string;
  avatarBg: string;
  serviceTag: string;
  rating: number;
  reviewsCount: number;
  priceFrom: number;
  availableIn: string;
  location: string;
  badge?: string;
}

interface FloatingProviderCardProps {
  provider: ProviderData;
  className?: string;
  locale?: string;
}

export function FloatingProviderCard({
  provider,
  className = '',
  locale = 'en',
}: FloatingProviderCardProps) {
  return (
    <div
      className={`group relative bg-white/95 backdrop-blur-md rounded-2xl p-4.5 border border-zinc-100 shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 text-start ${className}`}
    >
      {/* Top row: Avatar, Name, Rating */}
      <div className="flex items-start justify-between gap-3 mb-3">
        <div className="flex items-center gap-3">
          {/* Avatar with live status dot */}
          <div className="relative">
            <div
              className={`w-12 h-12 rounded-full ${provider.avatarBg} text-white font-bold text-sm flex items-center justify-center shadow-inner flex-shrink-0`}
            >
              {provider.avatarText}
            </div>
            <span className="absolute bottom-0 end-0 w-3.5 h-3.5 rounded-full bg-emerald-500 border-2 border-white" />
          </div>

          <div>
            <div className="flex items-center gap-1.5">
              <h4 className="text-sm font-bold text-zinc-900 group-hover:text-brand-600 transition-colors">
                {provider.name}
              </h4>
              <span title="Background Checked" className="inline-flex">
                <ShieldCheck className="w-4 h-4 text-emerald-600" />
              </span>
            </div>
            <p className="text-xs text-zinc-500 font-medium">{provider.serviceTag}</p>
          </div>
        </div>

        {/* Star Rating Badge */}
        <div className="inline-flex items-center gap-1 bg-amber-50 border border-amber-200/60 px-2 py-0.5 rounded-md text-xs font-bold text-amber-900">
          <Star className="w-3 h-3 fill-amber-400 text-amber-500" />
          <span>{provider.rating.toFixed(1)}</span>
          <span className="text-[10px] text-amber-700 font-normal">({provider.reviewsCount})</span>
        </div>
      </div>

      {/* Meta tags: Location & Doorstep ETA */}
      <div className="flex flex-wrap items-center gap-2 mb-3.5 text-[11px] text-zinc-600 font-medium">
        <span className="inline-flex items-center gap-1 bg-zinc-50 px-2 py-0.5 rounded-md border border-zinc-100">
          <MapPin className="w-3 h-3 text-zinc-400" />
          <span>{provider.location}</span>
        </span>
        <span className="inline-flex items-center gap-1 bg-emerald-50 text-emerald-800 px-2 py-0.5 rounded-md border border-emerald-100/80 font-semibold">
          <Clock className="w-3 h-3 text-emerald-600" />
          <span>{provider.availableIn}</span>
        </span>
      </div>

      {/* Footer: Price & Small "Book" Action CTA */}
      <div className="pt-3 border-t border-zinc-100 flex items-center justify-between gap-2">
        <div>
          <span className="text-[10px] uppercase font-bold text-zinc-400 block tracking-wider">
            Doorstep from
          </span>
          <span className="text-sm font-bold text-zinc-900">
            AED {provider.priceFrom}
          </span>
        </div>

        <Link
          href={`/${locale}/search?provider=${encodeURIComponent(provider.name)}`}
          className="px-4 py-1.5 bg-zinc-900 hover:bg-black active:scale-95 text-white font-bold text-xs rounded-full shadow-xs transition-transform"
        >
          Book
        </Link>
      </div>
    </div>
  );
}