'use client';

import Image from 'next/image';
import { IconButton } from '@/components/ui/button';
import Link from 'next/link';
import React from 'react';
import { useLayoutStore } from '@/stores';

const Header = React.memo(() => {
  const response = useLayoutStore((s) => s.response);

  return (
    // <Link href="/crushcoin">
    <div
      className="h-25 sm:h-50 rounded-2xl sm:rounded-4xl px-6 mb-12 flex items-center justify-between"
      style={{
        background:
          'linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(202, 153, 255, 0.2) 100%)',
      }}
    >
      <div className="flex gap-3 items-center">
        <img
          src="/images/home/icon-crush-free.png"
          className="h-15 w-15 sm:h-30 sm:w-30 object-cover"
          alt="header-bg"
        />
        <div>
          <div className="flex gap-5 txt-display-m sm:txt-display-l">
            Check-in{' '}
            <Image
              src="/images/home/left-star.png"
              className="h-6 w-6 sm:h-12 sm:w-12 object-cover"
              alt="header-bg"
              width={48}
              height={48}
            />
          </div>
          <div className="flex gap-5 items-center">
            <span
              className="txt-body-m sm:txt-headline-s bg-clip-text text-transparent"
              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',
              }}
            >
              Daily Free crush coinsh
            </span>
            <IconButton iconfont="icon-arrow-right-border" size="small" variant="primary" />
          </div>
        </div>
      </div>
      {response?.lg && (
        <Image src="/images/home/banner-header.png" alt="banner-header" width={250} height={250} />
      )}
    </div>
    // </Link>
  );
});

export default Header;