"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

interface DetailItemProps {
  label: string;
  value: string | number | undefined | null;
  icon?: React.ReactNode;
  className?: string;
}

export function DetailItem({
  label,
  value,
  icon,
  className,
}: DetailItemProps) {
  const display =
    value !== undefined && value !== null && value !== "" ? String(value) : "—";
  return (
    <div
      className={cn(
        "p-4 rounded-2xl bg-gray-50/50 border border-gray-100/80 transition-all hover:bg-white hover:border-[#6C63FF]/20 group",
        className,
      )}
    >
      <div className="flex items-center gap-2 mb-1.5">
        {icon && (
          <span className="text-gray-400 group-hover:text-[#6C63FF] transition-colors">
            {icon}
          </span>
        )}
        <span className="text-[10px] font-medium text-gray-400 uppercase tracking-widest font-['Lexend_Deca'] mb-1.5 select-none">
          {label}
        </span>
      </div>
      <p className="text-[15px] font-medium text-gray-800 font-['Lexend']">
        {display}
      </p>
    </div>
  );
}

interface SectionHeadingProps {
  icon: React.ReactNode;
  children: React.ReactNode;
  className?: string;
}

export function SectionHeading({
  icon,
  children,
  className,
}: SectionHeadingProps) {
  return (
    <div className={cn("flex items-center gap-2", className)}>
      <span className="text-[#6C63FF]/60">{icon}</span>
      <h3 className="text-[11px] font-semibold text-gray-400 uppercase tracking-widest">
        {children}
      </h3>
      <div className="flex-1 h-px bg-gray-100 ml-1" />
    </div>
  );
}

export function FormSectionHeading({
  icon,
  children,
  className,
}: SectionHeadingProps) {
  return (
    <div className={cn("flex items-center gap-2 mb-4", className)}>
      <div className="h-8 w-8 rounded-lg bg-[#6C63FF]/10 flex items-center justify-center text-[#6C63FF]">
        {icon}
      </div>
      <h3 className="text-[14px] font-black text-gray-900 uppercase tracking-wider font-['Lexend_Deca']">
        {children}
      </h3>
    </div>
  );
}