import React from "react";
import { Button } from "./ui/button";
import Image from "next/image";
import { cn } from "@/lib/utils";
import Link from "next/link";

function MeCard({
  className,
  button,
}: {
  button: { label: string; link: string };
  className?: string;
}) {
  return (
    <div
      className={cn(
        `group overflow-hidden w-full max-w-xs h-[80vh] bg-muted 
                      rounded-xl space-y-8 p-4 flex flex-col 
                      justify-between pb-20 relative`,
        className
      )}
    >
      <div className="space-y-4">
        <div className="h-64 w-3/4 mx-auto relative rounded-xl overflow-hidden z-10">
          <Image
            src="/me.jpg"
            alt="me"
            fill
            className="object-cover scale-105 transition-all duration-300 group-hover:scale-100"
          />
        </div>

        <div className="text-center flex flex-col items-center">
          <h4 className="text-lg  font-bold translate-y-px  ">Pablo</h4>
          <span className="text-emerald-500 text-sm -translate-y-px">
            Available for work
          </span>
          <Button className="mt-4" asChild>
            <Link href={button.link}>{button.label}</Link>
          </Button>
        </div>
      </div>

      <p className="text-center text-muted-foreground text-lg font-bold">
        A Software Engineer who has developed countless innovative solutions.
      </p>

      <div className="w-full h-40 halftone absolute left-0 group-hover:scale-[102.5%] transition-all duration-300 top-0 z-0" />
    </div>
  );
}

export default MeCard;
