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

interface AddressRowProps {
  name?: string;
  phone?: string;
  addressLines?: string[];
  selected?: boolean;
  showRadio?: boolean;
  showDefaultBadge?: boolean;
  showRemove?: boolean;
  showEdit?: boolean;
  showToggle?: boolean;
  toggleEnabled?: boolean;
  onSelect?: () => void;
  onRemove?: () => void;
  onEdit?: () => void;
  onToggle?: () => void;
  className?: string;
}

export default function AddressRow({
  name = "Ashan Namal",
  phone = "+94723452389",
  addressLines = [
    "29 Visakha Private Road, Colombo",
    "Colombo - 05 , Western,SriLanka",
  ],
  selected = true,
  showRadio = true,
  showDefaultBadge = true,
  showRemove = true,
  showEdit = true,
  showToggle = false,
  toggleEnabled = false,
  onSelect,
  onRemove,
  onEdit,
  onToggle,
  className,
}: AddressRowProps) {
  return (
    <article
      className={cn(
        "flex w-full items-center gap-4 rounded-lg border border-gray-200 bg-white px-5 py-4 text-sm text-[#1f2440]",
        className
      )}
    >
      {showRadio && (
        <button
          type="button"
          onClick={onSelect}
          className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 border-[#00AFC1]"
          aria-label={`Select address for ${name}`}
        >
          {selected && <span className="h-2 w-2 rounded-full bg-[#00AFC1]" />}
        </button>
      )}

      <div className="min-w-0 flex-1">
        <p className="font-semibold text-gray-900">
          {name} <span className="font-normal text-gray-600">| {phone}</span>
        </p>
        <div className="mt-2 space-y-1 text-xs text-gray-500">
          {addressLines.map((line) => (
            <p key={line}>{line}</p>
          ))}
        </div>
        {showDefaultBadge && (
          <span className="mt-2 inline-flex rounded bg-cyan-50 px-3 py-1 text-[11px] font-medium text-[#00AFC1]">
            Default
          </span>
        )}
      </div>

      <div className="flex shrink-0 items-center gap-5">
        {showToggle && (
          <button
            type="button"
            onClick={onToggle}
            className={cn(
              "relative h-6 w-11 rounded-full transition-colors",
              toggleEnabled ? "bg-[#00AFC1]" : "bg-gray-200"
            )}
            aria-label="Toggle default address"
          >
            <span
              className={cn(
                "absolute top-1 h-4 w-4 rounded-full bg-white transition-transform",
                toggleEnabled ? "translate-x-6" : "translate-x-1"
              )}
            />
          </button>
        )}

        {showRemove && (
          <button
            type="button"
            onClick={onRemove}
            className="text-xs font-medium text-red-500 transition-colors hover:text-red-600"
          >
            Remove
          </button>
        )}
        {showEdit && (
          <button
            type="button"
            onClick={onEdit}
            className="text-xs font-medium text-[#00AFC1] transition-colors hover:text-[#008fa0]"
          >
            Edit
          </button>
        )}
      </div>
    </article>
  );
}