import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

import React from "react";
  
  type cardProps = {
    title?: string;
    description?: string;
    imageLink?: string;
  };
  
  function GlassMorphCard({ title, description, imageLink }: cardProps) {
    return (
      <div className="flex justify-center flex-wrap items-center ">
        <div className="relative w-full max-w-sm rounded-xl bg-black/10 p-4 backdrop-blur-xl transition-all duration-300 hover:scale-[1.02] hover:shadow-xl dark:bg-white/30">
          <img
            src={imageLink}
            alt="Glass Card"
            className="h-48 w-full rounded-lg object-cover mb-4"
          />
          <h3 className="text-xl font-semibold text-black dark:text-white">
            {title || "Frosty Vibes"}
          </h3>
          <p className="text-gray-900 dark:text-white text-sm mt-1">
            {description ||
              "A beautiful card with a glassy background and blurred content."}
          </p>
        </div>
      </div>
    );
  }
  
  export default GlassMorphCard;