import * as React from 'react';
import Link from 'next/link';
import { Reveal } from '../Reveal';

interface ServiceCardProps {
  title: string;
  description: string;
  linkHref?: string;
  linkLabel?: string;
  delay?: number;
}

export const ServiceCard: React.FC<ServiceCardProps> = ({
  title,
  description,
  linkHref,
  linkLabel,
  delay = 0,
}) => {
  return (
    <Reveal delay={delay}>
      <div className="group relative p-10 md:p-12 border border-slate-100 rounded-3xl hover:border-slate-900 transition-all duration-700 bg-white hover:shadow-2xl hover:shadow-slate-100/50 overflow-hidden">
        {/* Decorative Corner */}
        <div className="absolute top-0 right-0 w-32 h-32 border-t border-r border-slate-100 rounded-tr-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
        <div className="absolute top-8 right-8 w-2 h-2 bg-slate-900 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-700 delay-100"></div>

        {/* Decorative background text */}
        <div className="absolute -right-4 -bottom-4 text-8xl md:text-9xl font-bold text-slate-50 select-none group-hover:text-slate-100 transition-colors duration-700 -z-10">
          {title.charAt(0)}
        </div>
        
        <h3 className="text-4xl md:text-6xl font-bold text-slate-900 mb-6 tracking-tighter group-hover:tracking-tight transition-all duration-700">
          {title}
        </h3>
        <p className="text-xl md:text-2xl text-slate-500 font-serif italic mb-10 leading-tight max-w-3xl group-hover:text-slate-700 transition-colors duration-700">
          {description}
        </p>
        {linkHref && linkLabel && (
          <Link
            href={linkHref}
            className="inline-flex items-center gap-4 text-slate-900 font-bold text-[10px] uppercase tracking-[0.2em] group/link"
          >
            {linkLabel}
            <div className="w-8 h-px bg-slate-200 group-hover/link:bg-slate-900 group-hover/link:w-16 transition-all duration-500"></div>
          </Link>
        )}
      </div>
    </Reveal>
  );
};