import React from 'react';
import Image from 'next/image';
import Reveal from '@/components/Reveal';
import { Badge, Container, Heading } from '@/components/ui';
import { Button } from '@/components/ui/Button';

export interface HeroSectionProps {
  title: string;
  badge?: string;
  subtitle?: string;
  backgroundImage?: any;
  alignment?: 'left' | 'center';
  ctaLabel?: string;
  ctaHref?: string;
}

export const HeroSection: React.FC<HeroSectionProps> = (props) => {
  const { title, badge, subtitle, backgroundImage, alignment, ctaLabel, ctaHref } = props;
  const bgSrc = backgroundImage?.sizes?.card?.url || backgroundImage?.url;

  return (
    <Reveal>
      <section
        className={`relative min-h-[50vh] md:min-h-[70vh] flex items-center pt-32 pb-20 md:pt-40 md:pb-32 overflow-hidden bg-primary-dark ${alignment === 'center' ? 'justify-center text-center' : ''}`}
      >
        {bgSrc && (
          <div className="absolute inset-0 z-0">
            <Image
              src={bgSrc}
              alt={title || 'Hero Background'}
              fill
              className="object-cover opacity-30 md:opacity-40"
              style={{
                objectPosition: `${backgroundImage?.focalX ?? 50}% ${backgroundImage?.focalY ?? 50}%`,
              }}
              sizes="100vw"
              priority
            />
            <div className="absolute inset-0 bg-gradient-to-b from-primary-dark/80 via-primary-dark/40 to-primary-dark/80" />
          </div>
        )}
        <Container className={`relative z-10 ${alignment === 'center' ? 'max-w-5xl' : ''}`}>
          <div className={`max-w-4xl ${alignment === 'center' ? 'mx-auto' : ''}`}>
            {badge && (
              <Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg">
                {badge}
              </Badge>
            )}
            <Heading level={1} className="text-white mb-4 md:mb-8">
              {title}
            </Heading>
            {subtitle && (
              <p className="text-lg md:text-2xl text-white/70 font-medium leading-relaxed max-w-2xl">
                {subtitle}
              </p>
            )}
            {ctaLabel && ctaHref && (
              <div className="mt-8">
                <Button
                  href={ctaHref}
                  variant="accent"
                  size="lg"
                >
                  {ctaLabel}
                  <span className="ml-3 transition-transform group-hover/btn:translate-x-2">
                    &rarr;
                  </span>
                </Button>
              </div>
            )}
          </div>
        </Container>
      </section>
    </Reveal>
  );
};