"use client";

import Image from "next/image";
import HeaderSlide from "./HeaderSlide";
import { IconButton } from "@/components/ui/button";
import Link from "next/link";
const Header = () => {

  return (
    <div 
      className="flex flex-col lg:flex-row items-center lg:items-start justify-center gap-8 lg:gap-0 px-4 lg:px-0" 
      style={{ backgroundImage: 'url(/images/home/bg-star.png)', backgroundSize: 'contain', backgroundPosition: 'center' }}
    >
      <div className="flex-1 pt-12 lg:pt-[99px] pb-8 lg:pb-20 text-center lg:text-left max-w-full lg:max-w-none pr-6">
        <div className="flex justify-center lg:justify-start">
          <Image src="/images/home/left-star.png" className="w-12 h-12 object-cover" alt="header-bg" width={48} height={48} />
        </div>
        <h1 className="mt-3 txt-headline-m px-4 lg:px-0">
          From 'Hi' to 'I Do', sparked by every chat
        </h1>
        <Link href="/crushcoin">
          <div className="mt-8 flex justify-center lg:justify-start">
            <div className="pl-[22px]">
              <div
                className="py-2 pr-2 pl-[59px] border border-solid border-outline-normal rounded-full relative h-12 flex items-center gap-3"
                style={{
                  background: "linear-gradient(90deg, #CF51C7 0%, rgba(105, 41, 101, 0) 100%)",
                  backgroundRepeat: "no-repeat",
                }}
              >
                <span className="txt-label-l whitespace-nowrap">Daily Free CrushCoins</span>
                <IconButton iconfont="icon-arrow-right-border" size="small" variant="primary" />
                <Image src="/images/home/icon-crush-free.png" className="absolute -left-[33px] -top-[10px]" alt="icon-crush-free" width={102} height={64} />
              </div>
            </div>
          </div>
        </Link>
      </div>
      <div className="w-full lg:w-[672px] flex-shrink-0 py-6 lg:py-12 max-w-[672px]">
        <HeaderSlide />
      </div>
    </div>
  );
}
 
export default Header;