"use client";

import Image from "next/image";
import type { Testimonial } from "@/data/testimonials";

interface TestimonialCardProps {
  className?: string;
  testimonial: Testimonial;
}

export function TestimonialCard({
  testimonial,
  className = "",
}: TestimonialCardProps) {
  return (
    <div
      className={`group mx-2 h-full min-h-[200px] max-w-[280px] rounded-xl border border-white/10 bg-gradient-to-br from-white/5 to-white/10 p-4 shadow-sm transition-all duration-500 hover:border-white/20 hover:bg-white/10 sm:max-w-md md:mx-4 md:min-h-[230px] md:max-w-lg md:p-8 ${className}`}
    >
      <blockquote className="py-2 font-semibold text-sm text-white leading-relaxed md:text-base">
        "{testimonial.quote}"
      </blockquote>

      <div className="mt-4 flex items-center gap-2 md:mt-8">
        <Image
          alt={testimonial.name}
          className="rounded-xl"
          height={40}
          src={testimonial.src}
          width={40}
        />
        <div className="flex flex-col">
          <p className="max-w-sm font-medium text-neutral-200 text-xs md:text-sm">
            {testimonial.name}
          </p>
          {testimonial.designation && (
            <p className="max-w-sm font-normal text-neutral-400 text-xs md:text-sm">
              {testimonial.designation}
            </p>
          )}
        </div>
      </div>
    </div>
  );
}