import Link from 'next/link';
import { ArrowRight } from 'lucide-react';
import { Button } from '@/components/ui/button';

export type HeroProps = {
  heading?: string;
  description?: string;
  primaryLabel?: string;
  primaryUrl?: string;
  secondaryLabel?: string;
  secondaryUrl?: string;
  imageUrl?: string;
  imageAlt?: string;
  imagePosition?: 'left' | 'right';
};

export default function Hero({
  heading = '', description = '', primaryLabel = '', primaryUrl = '#', secondaryLabel = '', secondaryUrl = '#', imageUrl = '', imageAlt = '', imagePosition = 'right',
}: HeroProps) {
  const copy = (
    <div className="flex max-w-xl flex-col items-start justify-center py-14 sm:py-20 lg:py-28">
      <h1 className="text-5xl font-normal leading-[0.96] tracking-[-0.05em] sm:text-6xl lg:text-7xl xl:text-8xl">{heading}</h1>
      {description && <p className="mt-6 max-w-lg text-base leading-7 text-muted-foreground sm:text-lg">{description}</p>}
      <div className="mt-8 flex flex-wrap gap-3">
        {primaryLabel && <Button asChild size="lg"><Link href={primaryUrl}>{primaryLabel}<ArrowRight aria-hidden="true" /></Link></Button>}
        {secondaryLabel && <Button asChild variant="outline" size="lg"><Link href={secondaryUrl}>{secondaryLabel}</Link></Button>}
      </div>
    </div>
  );

  const image = (
    <div className="flex py-8 sm:py-12 lg:py-16">
      <div className="min-h-80 w-full overflow-hidden rounded-xl lg:min-h-[32rem]">
        {imageUrl ? <img src={imageUrl} alt={imageAlt} className="h-full min-h-80 w-full object-cover lg:min-h-[32rem]" /> : <div className="flex h-full min-h-80 items-center justify-center bg-secondary text-sm text-muted-foreground lg:min-h-[32rem]">Add a hero image</div>}
      </div>
    </div>
  );

  return (
    <section className="bg-background">
      <div className="section-shell grid items-stretch gap-10 lg:grid-cols-2 lg:gap-16">
        {imagePosition === 'left' ? <>{image}{copy}</> : <>{copy}{image}</>}
      </div>
    </section>
  );
}