import * as React from "react";
import { Stage } from "./types";

export function FieldLabel({ children }: { children: React.ReactNode }) {
  return (
    <label className="block text-[10px] font-bold text-gray-400 uppercase tracking-[0.09em] font-['Lexend_Deca'] mb-1.5 select-none">
      {children}
    </label>
  );
}

export function SectionHeading({
  icon,
  children,
}: {
  icon: React.ReactNode;
  children: React.ReactNode;
}) {
  return (
    <div className="flex items-center gap-2 mb-4">
      <div className="h-6 w-6 rounded-md bg-[#6C63FF]/10 flex items-center justify-center text-[#6C63FF]">
        {icon}
      </div>
      <h3 className="text-[14px] font-extrabold text-gray-900 font-['Lexend']">
        {children}
      </h3>
    </div>
  );
}

/** Resolve default stage: Prospecting by name or id, else first stage. */
export function defaultStageId(stages: readonly Stage[]): string {
  if (!stages.length) return "";
  const newLead = stages.find(
    (s) =>
      s.name?.toLowerCase() === "new lead" ||
      s.id?.toLowerCase() === "new_lead",
  );
  if (newLead) return newLead.id;
  const prospecting = stages.find(
    (s) =>
      s.name?.toLowerCase() === "prospecting" ||
      s.id?.toLowerCase() === "prospecting",
  );
  return prospecting?.id ?? stages[0].id;
}

export function GridIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      width="32"
      height="32"
      viewBox="0 0 32 32"
      fill="none"
      {...props}
    >
      <rect
        x="4"
        y="4"
        width="24"
        height="24"
        rx="4"
        fill="#6C63FF"
        fillOpacity="0.15"
      />
      <rect
        x="8"
        y="8"
        width="6"
        height="6"
        rx="1"
        fill="#6C63FF"
        fillOpacity="0.5"
      />
      <rect
        x="18"
        y="8"
        width="6"
        height="6"
        rx="1"
        fill="#6C63FF"
        fillOpacity="0.5"
      />
      <rect
        x="8"
        y="18"
        width="6"
        height="6"
        rx="1"
        fill="#6C63FF"
        fillOpacity="0.5"
      />
      <rect
        x="18"
        y="18"
        width="6"
        height="6"
        rx="1"
        fill="#6C63FF"
        fillOpacity="0.5"
      />
    </svg>
  );
}
