"use client";

import { ConnectionStatus as ConnectionStatusType } from "../types/Types";
import { TickCircle, CloseCircle } from "iconsax-react";
import { ComponentType } from "react";

interface ConnectionStatusProps {
  status: ConnectionStatusType;
}

type StatusConfig = {
  label: string;
  color: string;
  iconColor: string;
  bgColor: string;
  showIcon: boolean;
  icon?: ComponentType<{
    className?: string;
    color?: string;
    variant?: "Linear" | "Outline" | "Broken" | "Bold" | "Bulk" | "TwoTone";
  }>;
};

const statusConfig: Record<ConnectionStatusType, StatusConfig> = {
  connected: {
    label: "متصل",
    showIcon: true,
    icon: TickCircle as ComponentType<{
      className?: string;
      color?: string;
      variant?: "Linear" | "Outline" | "Broken" | "Bold" | "Bulk" | "TwoTone";
    }>,
    color: "text-green-500",
    iconColor: "#10b981",
    bgColor: "bg-green-100 dark:bg-green-900/20",
  },
  disconnected: {
    label: "قطع شده",
    showIcon: true,
    icon: CloseCircle as ComponentType<{
      className?: string;
      color?: string;
      variant?: "Linear" | "Outline" | "Broken" | "Bold" | "Bulk" | "TwoTone";
    }>,
    color: "text-gray-500",
    iconColor: "#6b7280",
    bgColor: "bg-gray-100 dark:bg-gray-900/20",
  },
  connecting: {
    label: "در حال اتصال...",
    showIcon: false,
    color: "text-blue-500",
    iconColor: "#3b82f6",
    bgColor: "bg-blue-100 dark:bg-blue-900/20",
  },
  reconnecting: {
    label: "در حال اتصال مجدد...",
    showIcon: false,
    color: "text-yellow-500",
    iconColor: "#eab308",
    bgColor: "bg-yellow-100 dark:bg-yellow-900/20",
  },
  error: {
    label: "خطا در اتصال",
    showIcon: true,
    icon: CloseCircle as ComponentType<{
      className?: string;
      color?: string;
      variant?: "Linear" | "Outline" | "Broken" | "Bold" | "Bulk" | "TwoTone";
    }>,
    color: "text-red-500",
    iconColor: "#ef4444",
    bgColor: "bg-red-100 dark:bg-red-900/20",
  },
};

export default function ConnectionStatus({ status }: ConnectionStatusProps) {
  const config = statusConfig[status];
  const isSpinning = status === "connecting" || status === "reconnecting";

  const IconComponent = config.showIcon ? config.icon : null;

  return (
    <div
      className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-xs ${config.bgColor} ${config.color}`}
    >
      {isSpinning ? (
        <div className="size-4 border-2 border-current/30 border-t-current rounded-full animate-spin" />
      ) : IconComponent ? (
        <IconComponent className="size-4" color={config.iconColor} variant="Bold" />
      ) : null}
      <span>{config.label}</span>
    </div>
  );
}
