"use client";

import React, { useState, useEffect } from "react";

export interface TokenLogoProps {
  logoURI?: string;
  symbol: string;
  name: string;
  size: number;
  style?: React.CSSProperties;
}

// Token Logo component with fallback placeholder
export const TokenLogo = ({
  logoURI,
  symbol,
  name,
  size,
  style,
}: TokenLogoProps) => {
  const [imageError, setImageError] = useState(false);

  useEffect(() => {
    setImageError(false);
  }, [logoURI]);

  const placeholderStyle = {
    width: size,
    height: size,
    borderRadius: "50%",
    background: `linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%)`,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    color: "#1a1a1a",
    fontWeight: "bold",
    fontSize: size < 24 ? "8px" : size < 32 ? "10px" : "12px",
    flexShrink: 0,
    ...style,
  };

  if (!logoURI || imageError) {
    return (
      <div style={placeholderStyle} title={name}>
        {symbol.slice(0, 2).toUpperCase()}
      </div>
    );
  }

  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        width: size,
        height: size,
        borderRadius: "50%",
        overflow: "hidden",
        ...style,
      }}
    >
      <img
        src={logoURI}
        alt={name}
        style={{
          maxWidth: "100%",
          maxHeight: "100%",
          objectFit: "contain",
        }}
        onError={() => setImageError(true)}
      />
    </div>
  );
};