import React from 'react'
import Image from 'next/image'
import { Button, Row } from '../../atoms'
import styles from './styles.module.css'
import Link from 'next/link'

interface HeaderHomeProps {
  logo?: string
  showLogo?: boolean
  showButton?: boolean
  url?: string
  userName?: string
  isLogin?: boolean
  onClick?: () => void
}
export const HeaderHome: React.FC<HeaderHomeProps> = ({
  logo = '',
  url = '/',
  userName = '',
  isLogin = false,
  showButton = true,
  showLogo = true,
  onClick = () => { }
}) => {
  const handleClick = (): void => {
    onClick()
  }

  return (
    <header className={styles.header}>
      {showLogo && <Link href={url}>
        <div className={styles.logoContainer}>
          <Image
            width={170}
            height={50}
            src={logo}
            objectFit='contain'
            alt="Logo"
            className={styles.logo}
          />
        </div>
      </Link>
      }
      <Row style={{
        width: 'min-content'
      }}>
        {showButton && <Button primary width='200px' onClick={() => handleClick()}>
          Iniciar sesión
        </Button>}
      </Row>
      {isLogin &&
        <div className={styles.user}>
          {userName.slice(0, 1).toUpperCase()}
        </div>
      }
    </header>
  )
}