import { IconButton } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import Image from "next/image";
import { useRouter } from "next/navigation";

const ImageSelector = ({
  value,
  onChange,
  onImageRouter
}: {
  value: string;
  onChange: (value: string | undefined) => void;
  onImageRouter?: () => void;
}) => {
  const router = useRouter()

  // 处理图片区域点击 - 跳转到图片生成页面
  const handleImageClick = () => {
    if (onImageRouter) {
      onImageRouter()
    } else {
      router.push("/generate/image")
    }
  }

  if (!value) {
    return (
      <div
        className={cn(
          "relative h-[180px] rounded-sm overflow-hidden cursor-pointer transition-all",
          "bg-surface-element-normal hover:bg-surface-element-hover",
          "flex flex-col items-center justify-center gap-3 p-2"
        )}
        onClick={handleImageClick}
      >
        <i className="iconfont icon-uploadimg !text-[32px] text-txt-secondary-normal" />
        <div className="text-txt-secondary-normal txt-body-m">Click to Generate Image</div>
      </div>
    )
  }

  return (
    <div className="relative w-[135px] h-[180px] rounded-sm overflow-hidden">
      <Image
        src={value}
        alt="Character image"
        width={135}
        height={180}
        className="object-cover w-full h-full object-top"
      />
      <div className="absolute top-2 right-2 leading-none z-[1]">
        <IconButton
          iconfont="icon-close"
          variant="tertiaryDark"
          size="mini"
          onClick={() => onChange('')}
        />
      </div>
    </div>
  );
}
 
export default ImageSelector;