"use client";

import Image from "next/image";
import { useState } from "react";

type BrandLogoProps = {
  href?: string;
  className?: string;
  iconClassName?: string;
  textClassName?: string;
  iconSize?: number;
  priority?: boolean;
};

export function BrandLogo({
  href = "#",
  className = "",
  iconClassName = "",
  textClassName = "font-mono font-bold text-lg tracking-tight",
  iconSize = 36,
  priority = false,
}: BrandLogoProps) {
  const [imageFailed, setImageFailed] = useState(false);

  return (
    <a href={href} className={`flex items-center gap-2 group ${className}`.trim()}>
      <div
        className={`relative overflow-hidden rounded-lg bg-gradient-to-br from-accent to-purple-500 text-white shadow-lg shadow-accent/25 ${iconClassName}`.trim()}
        style={{ width: iconSize, height: iconSize }}
      >
        {imageFailed ? (
          <div className="flex h-full w-full items-center justify-center font-bold text-sm">
            S
          </div>
        ) : (
          <Image
            src="/brand/icon.png"
            alt="Simanullang Dev logo"
            fill
            sizes={`${iconSize}px`}
            className="object-cover"
            priority={priority}
            onError={() => setImageFailed(true)}
          />
        )}
      </div>

      <span className={textClassName}>
        simanullang<span className="text-accent">.dev</span>
      </span>
    </a>
  );
}
