import React from 'react';
import Image from 'next/image';
import GroceryBasketImg from "@/assets/images/groceryBasket.png";

interface HeroSectionProps {
    orange: string;
}

const HeroSection: React.FC<HeroSectionProps> = ({ orange }) => {
    return (
        <section className="relative rounded-[3rem] overflow-hidden min-h-[350px] flex items-center">
            <Image
                src={GroceryBasketImg}
                alt="Grocery Banner"
                fill
                className="object-cover"
                priority
            />
            <div className="relative z-10 w-full grid grid-cols-1 md:grid-cols-2 items-center px-8 md:px-16 py-12">
                <div className="space-y-6">
                    <h1 className="text-4xl md:text-5xl font-bold text-gray-900 leading-tight">
                        Pharmacy, Grocery & Food Delivered Fast
                    </h1>
                    <p className="text-lg text-gray-600 max-w-md">
                        Medicines, fresh groceries, and tasty meals delivered quickly right to your doorstep.
                    </p>
                </div>
            </div>
        </section>
    );
};

export default React.memo(HeroSection);