"use client";

import InfoIcon from "@/modules/icons/InfoIcon";
import Image from "next/image";

interface TemplateCardProps {
  template: {
    id: number;
    title: string;
    category?: string;
    image: string;
    tags?: string[];
    subtitle?: React.ReactNode | string;
    buttonText?: string;
    link?: string;
  };
  onLike?: () => void;
}

export default function Page({ template, onLike }: TemplateCardProps) {
  const isTile = !!template.buttonText;

  if (isTile) {
    return (
      <div className="group cursor-pointer shadow-[0_2px_8px_rgba(0,0,0,0.1)] hover:shadow-[0_6px_16px_rgba(0,0,0,0.15)] bg-white border border-border rounded-xl overflow-hidden transition-shadow">
        <a href={template.link} target="_blank" rel="noopener noreferrer">
          {/* <img
            src={template.image}
            alt={template.title}
            className="w-full object-cover aspect-square"
          /> */}
          <div className="relative w-full aspect-square">
            <Image
              src={template.image}
              alt={template.title}
              fill
              className="object-cover"
            />
          </div>
        </a>

        <div className="p-4">
          <div className="font-semibold text-lg text-foreground mb-1">
            {template.title}
          </div>
          {template.subtitle && (
            <div className="text-sm text-muted-foreground mb-3">
              {template.subtitle}
            </div>
          )}
          <a
            href={template.link}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex items-center text-accent font-medium hover:underline"
          >
            {template.buttonText}
          </a>
        </div>
      </div>
    );
  }

  return (
    <div className="group cursor-pointer shadow-[0_2px_8px_rgba(0,0,0,0.1)] hover:shadow-[0_6px_16px_rgba(0,0,0,0.15)]">
      <div className="relative bg-card border border-border overflow-hidden mb-4 aspect-square">
        {/* <img
          src={template.image || "/placeholder.svg"}
          alt={template.title}
          className="w-full h-full object-cover transition-transform duration-300"
        /> */}
        <div className="relative w-full h-64">
          <Image
            src={template.image || "/placeholder.svg"}
            alt={template.title}
            fill
            className="object-cover transition-transform duration-300"
          />
        </div>

        {/* Overlay */}
        <div className="absolute inset-0 bg-black/0 transition-colors duration-300 flex items-center justify-center opacity-0 group-hover:opacity-100">
          <div className="flex gap-3">
            <button
              onClick={(e) => {
                e.stopPropagation();
                onLike?.();
              }}
              className="p-3 transition-colors text-lg"
            ></button>
          </div>
        </div>
      </div>

      {/* Info */}
      <div className="flex items-center justify-between mt-2 mb-3">
        <h3 className="text-foreground group-hover:text-accent transition-colors ml-2">
          {template.title}
        </h3>
        <InfoIcon
          size={18}
          color="#6e9cc6"
          className="mr-2 group-hover:fill-accent transition-colors cursor-pointer"
        />
      </div>
    </div>
  );
}