import Button from "@/components/ui/Button";
import RoundImageLabel from "@/components/ui/RoundImageLabel";

import { cn } from "@/lib/utils";

interface SellerSummaryProps {
  imageSrc?: string;
  name?: string;
  description?: string;
  rating?: number;
  ratesLabel?: string;
  reviewsLabel?: string;
  followersLabel?: string;
  productsLabel?: string;
  showFollow?: boolean;
  showContact?: boolean;
  showWishlist?: boolean;
  showShare?: boolean;
  className?: string;
}

function StarIcon() {
  return (
    <svg className="h-4 w-4 text-[#FFB800]" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path d="m10 1.5 2.55 5.16 5.7.83-4.13 4.02.98 5.68L10 14.51l-5.1 2.68.98-5.68L1.75 7.49l5.7-.83L10 1.5Z" />
    </svg>
  );
}

export default function SellerSummary({
  imageSrc = "/images/cozy-round.svg",
  name = "Cozy",
  description = "Thoughtfully handmade. Beautifully carried.",
  rating = 4.3,
  ratesLabel = "Rates",
  reviewsLabel = "112 Reviews",
  followersLabel = "12,500 Followers",
  productsLabel = "196 Products",
  showFollow = true,
  showContact = true,
  showWishlist = true,
  showShare = true,
  className,
}: SellerSummaryProps) {
  return (
    <section className={cn("flex flex-col gap-6 sm:flex-row sm:items-center", className)}>
      <RoundImageLabel imageSrc={imageSrc} imageAlt={name} size="lg" />

      <div className="min-w-0 flex-1 space-y-3">
        {(name || description) && (
          <div>
            {name && <h2 className="text-2xl font-medium text-[#1f2440]">{name}</h2>}
            {description && <p className="mt-1 text-base text-gray-500">{description}</p>}
          </div>
        )}

        <div className="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-gray-600">
          {rating && (
            <span className="inline-flex items-center gap-1">
              <StarIcon />
              <span className="font-medium text-gray-900">{rating.toFixed(1)}</span>
              <span>{ratesLabel}</span>
            </span>
          )}
          {reviewsLabel && <span>{reviewsLabel}</span>}
          {followersLabel && <span>{followersLabel}</span>}
          {productsLabel && <span>{productsLabel}</span>}
        </div>

        <div className="flex flex-wrap items-center gap-2">
          {showFollow && (
            <Button variant="teal" className="h-9 min-w-32 text-xs">
              Follow
            </Button>
          )}
          {showContact && (
            <Button variant="outline" className="h-9 min-w-32 rounded-full border-[#00AFC1] text-xs text-[#00AFC1]">
              Contact Seller
            </Button>
          )}
          {showWishlist && (
            <Button variant="icon" aria-label="Add seller to wishlist" className="h-9 w-9 border-0 bg-gray-100">
              <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78Z" />
              </svg>
            </Button>
          )}
          {showShare && (
            <Button variant="icon" aria-label="Share seller" className="h-9 w-9 border-0 bg-gray-100">
              <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M8.5 12.5 15.5 16.5M15.5 7.5 8.5 11.5M18 8.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM6 14.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM18 20.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
              </svg>
            </Button>
          )}
        </div>
      </div>
    </section>
  );
}
