"use client";

import React from "react";
import { CardBody, CardContainer, CardItem } from "./3d-card";

interface ThreeDCardDemoProps {
  title?: string;
  description?: string;
  imageSrc?: string;
  imageAlt?: string;
  primaryButtonText?: string;
  primaryButtonHref?: string;
  secondaryButtonText?: string;
  onSecondaryButtonClick?: () => void;
  className?: string;
}

export function ThreeDCardDemo({
  title = "Make things float in air",
  description = "Hover over this card to unleash the power of CSS perspective",
  imageSrc = "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
  imageAlt = "thumbnail",
  primaryButtonText = "Try now →",
  primaryButtonHref = "https://twitter.com/mannupaaji",
  secondaryButtonText = "Sign up",
  onSecondaryButtonClick,
  className = "",
}: ThreeDCardDemoProps) {
  return (
    <CardContainer className={`inter-var ${className}`}>
      <CardBody className="bg-gray-50 relative group/card dark:hover:shadow-2xl dark:hover:shadow-emerald-500/[0.1] dark:bg-black dark:border-white/[0.2] border-black/[0.1] w-auto sm:w-[30rem] h-auto rounded-xl p-6 border">
        <CardItem
          translateZ="50"
          className="text-xl font-bold text-neutral-600 dark:text-white"
        >
          {title}
        </CardItem>
        <CardItem
          as="p"
          translateZ="60"
          className="text-neutral-500 text-sm max-w-sm mt-2 dark:text-neutral-300"
        >
          {description}
        </CardItem>
        <CardItem translateZ="100" className="w-full mt-4">
          <img
            src={imageSrc}
            height="1000"
            width="1000"
            className="h-60 w-full object-cover rounded-xl group-hover/card:shadow-xl"
            alt={imageAlt}
          />
        </CardItem>
        <div className="flex justify-between items-center mt-20">
          <CardItem
            translateZ={20}
            as="a"
            href={primaryButtonHref}
            target="_blank"
            rel="noopener noreferrer"
            className="px-4 py-2 rounded-xl text-xs font-normal dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
          >
            {primaryButtonText}
          </CardItem>
          <CardItem
            translateZ={20}
            as="button"
            onClick={onSecondaryButtonClick}
            className="px-4 py-2 rounded-xl bg-black dark:bg-white dark:text-black text-white text-xs font-bold hover:bg-gray-800 dark:hover:bg-gray-200 transition-colors"
          >
            {secondaryButtonText}
          </CardItem>
        </div>
      </CardBody>
    </CardContainer>
  );
}