"use client"

import { IconButton } from "@/components/ui/button";
import useCreatorNavigation from "@/hooks/useCreatorNavigation";
import Image from "next/image";


const CreateCrush = () => {
  const { routerToCreate } = useCreatorNavigation();

  return (
    <div className="mt-12 pt-[61.5px] relative cursor-pointer" onClick={routerToCreate}>
      <div
        className="rounded-lg px-10 py-[54px]"
        style={{
          background: "linear-gradient(90deg, #7A455F 0%, #AA90F9 78.78%, #8DF3E2 109.46%)"
        }}
      >
        <div className="flex items-center gap-4">
          <Image src="/icons/heart-single.svg" alt="create-crush" width={25} height={22} />
          <h2 className="txt-headline-s text-txt-primary-normal">Create your own Crush</h2>
          <IconButton
            iconfont="icon-arrow-right-border"
            variant="tertiaryDark"
            size="small"
          />
        </div>
      </div>
      <Image
        src="/images/home/banner-create-icon.png"
        alt="create-crush"
        className="absolute right-0 bottom-0"
        width={525} height={200}
      />
    </div>
  );
}
 
export default CreateCrush;