import { MaterialIcon } from "../icons/nav-icons";
import type { OwnerStatMetric } from "@/lib/dashboard/owner-dashboard";

type OwnerStatCardProps = {
  metric: OwnerStatMetric;
};

export function OwnerStatCard({ metric }: OwnerStatCardProps) {
  return (
    <article className="relative flex min-w-0 flex-col gap-4 overflow-hidden rounded-[10px] border border-neutral-40 bg-neutral-10 p-5">
      <div
        className="pointer-events-none absolute -top-10 -right-10 size-28 rounded-full border-14 border-neutral-20"
        aria-hidden
      />

      <MaterialIcon
        name={metric.icon}
        size={24}
        className="relative text-neutral-100"
      />

      <div className="relative flex flex-col gap-1">
        <p className="text-m-regular text-neutral-100">{metric.label}</p>
        <p className="heading-s text-neutral-100">{metric.value}</p>
        {metric.subtext && (
          <p className="text-s-regular text-neutral-80">
            {metric.subtext.prefix}
            <span className="text-secondary-500">{metric.subtext.highlight}</span>
          </p>
        )}
      </div>
    </article>
  );
}