'use client';

import Image from 'next/image';
import { IconButton } from '@/components/ui/button';
import Link from 'next/link';
import React from 'react';
import { useMedia } from '@/hooks/tools';

const Header = React.memo(() => {
  const response = useMedia();
  return (
    <div
      className="flex items-center justify-center"
      style={{
        backgroundImage: 'url(/images/home/bg-star.png)',
        backgroundSize: 'contain',
        backgroundPosition: 'center',
      }}
    >
      <div className="flex-1 pt-12 pb-8 text-center">
        <Image
          src="/images/home/left-star.png"
          className="h-12 w-12 object-cover"
          alt="header-bg"
          width={48}
          height={48}
        />
        <h1 className="txt-headline-m mt-3">Spicyxx.ai</h1>
        <h1
          className="txt-headline-m mt-3"
          style={{
            background:
              'linear-gradient(109.2deg, rgba(211, 123, 235, 1) 37.08%, rgba(147, 123, 235, 1) 128.91%)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
          }}
        >
          A Different World
        </h1>
        <Link href="/crushcoin">
          <div
            className="border-outline-normal max-w-100 mt-8 relative flex h-12 items-center justify-between rounded-full border border-solid pr-2 pl-[59px]"
            style={{
              background:
                'linear-gradient(90deg, rgba(168, 70, 201, 1) 0%, rgba(255, 183, 66, 1) 12.97%, rgba(80, 56, 255, 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 -top-5 left-1"
              alt="icon-crush-free"
              width={60}
              height={60}
            />
          </div>
        </Link>
      </div>
      {response?.sm && (
        <Image src="/images/home/banner-header.png" alt="banner-header" width={400} height={400} />
      )}
    </div>
  );
});

export default Header;