import Alpona from '../../../assets/chowman_alpona.avif';
import Banner from '../../../assets/chowman_banner.avif';

interface SpinningAlponaProps {
    subtext?: string;
    firstLine?: string;
    secondLine?: string;
}

const SpinningAlpona = ({ subtext, firstLine, secondLine }: SpinningAlponaProps) => {
    return (
        <div className="relative h-[380px] w-[380px] sm:h-[380px] sm:w-[380px] lg:h-[360px] lg:w-[360px] mt-5 overflow-hidden">
            {/* Rotating Alpona */}
            <img
                src={Alpona}
                alt=""
                className="
                    absolute 
                    inset-0
                    h-full
                    w-full
                    object-contain
                    animate-[spin_30s_linear_infinite]
                "
            />

            {/* Fixed Banner */}
            <div className="absolute inset-0 flex items-center justify-center">
                <img
                    src={Banner}
                    alt=""
                    className="h-auto w-full"
                />
            </div>

            {/* Text overlay */}
            <div className="absolute inset-0 flex flex-col items-center justify-center px-12 text-center">
                {subtext && (
                    <p className="mb-2 text-[10px] font-medium uppercase tracking-[0.3em] text-[#E8D9C5] sm:text-xs font-montserrat">
                        {subtext}
                    </p>
                )}
                {firstLine && (
                    <h2 className="text-4xl leading-tight text-white sm:text-4xl font-amethyst">
                        <span className="tracking-wider">
                            {firstLine}
                        </span>
                    </h2>
                )}
                {secondLine && (
                    <h2 className="text-4xl leading-tight text-[#EDC36D] sm:text-4xl font-amethyst">
                        <span className="tracking-wider">
                            {secondLine}
                        </span>
                    </h2>
                )}
            </div>
        </div>
    );
};

export default SpinningAlpona;