Support

import * as React from "react";

import { cn } from "@/registry/berlin/lib/utils";
import { TextLink } from "@/registry/berlin/ui/link";

function StarIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
      <path d="m8 1.5 1.9 3.86 4.26.62-3.08 3 0.72 4.25L8 11.2l-3.8 2 0.72-4.25-3.08-3 4.26-.62L8 1.5Z" />
    </svg>
  );
}

export interface RatingProps {
  rating: number;
  numberOfReviews: number;
  label: string;
  className?: string;
}

export function Rating({ rating, numberOfReviews, label, className }: RatingProps) {
  const stars = Math.max(1, Math.min(5, Math.round(rating)));

  return (
    <div className={cn("flex items-center gap-2 text-sm leading-6", className)}>
      <div className="font-semibold text-foreground">{rating.toFixed(1)}</div>
      <div className="flex items-center gap-0.5 text-[var(--Yellow)]">
        {Array.from({ length: stars }).map((_, index) => (
          <StarIcon key={index} className="size-4" />
        ))}
      </div>
      <div className="text-muted-foreground">{`${Math.max(numberOfReviews - 1, 0)} + ${label}`}</div>
    </div>
  );
}

export interface SupportProps {
  imageUrl: string;
  text: string;
  link: string;
  linkText: string;
  className?: string;
}

export function Support({ imageUrl, text, link, linkText, className }: SupportProps) {
  return (
    <div className={cn("flex items-center gap-3 rounded-2xl bg-card p-3", className)}>
      <img src={imageUrl} alt="Support" className="size-10 rounded-full object-cover" />
      <div className="flex min-w-0 flex-col">
        <div className="text-sm font-medium leading-6 text-foreground">{text}</div>
        <TextLink text={linkText} link={link} />
      </div>
    </div>
  );
}