import { Button } from '@scandic-hotels/design-system/Button'
import { Chips } from '@scandic-hotels/design-system/Chips'
import { ChipButton } from '@scandic-hotels/design-system/ChipButton'
import { ChipLink } from '@scandic-hotels/design-system/ChipLink'
import { Typography } from '@scandic-hotels/design-system/Typography'

import styles from './header.module.css'

import type { PressEvent } from 'react-aria-components'

export function Header() {
  const onPress = (e: PressEvent) => alert(e.target.innerHTML)
  const onClick = (e: React.MouseEvent<HTMLAnchorElement>) =>
    alert(`Link to: ${e.currentTarget.href}`)

  return (
    <header className={styles.header}>
      <Typography variant="Title/lg">
        <h1 className={styles.title}>Nyhavn</h1>
      </Typography>
      <div className={styles.intro}>
        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.introText}>
            Welcome to Nyhavn, Copenhagen's captivating waterfront district!
            Explore this vibrant area known for its colorful 17th-century
            townhouses, historic wooden ships, and lively atmosphere. Nyhavn is
            the perfect spot for dining, culture, and picturesque views, making
            it a must-visit for every Copenhagen traveler.
          </p>
        </Typography>
        <span>
          <Button
            variant="Tertiary"
            size="Medium"
            typography="Body/Paragraph/mdBold"
          >
            Explore nearby hotels
          </Button>
        </span>
      </div>

      <div className={styles.chips}>
        <Chips>
          <ChipButton onPress={onPress}>Restaurants and bars</ChipButton>
          <ChipLink onClick={onClick} href="/kristianshavn">
            Kristianshavn
          </ChipLink>
          <ChipButton onPress={onPress}>Tivoli Gardens</ChipButton>
          <ChipLink onClick={onClick} href="/copenhagen">
            See all Copenhagen
          </ChipLink>
          <ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
          <ChipLink onClick={onClick} href="/copenhagen">
            See all Copenhagen
          </ChipLink>
          <ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
          <ChipLink onClick={onClick} href="/copenhagen">
            See all Copenhagen
          </ChipLink>
          <ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
          <ChipLink onClick={onClick} href="/copenhagen">
            See all Copenhagen
          </ChipLink>
          <ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
          <ChipLink onClick={onClick} href="/copenhagen">
            See all Copenhagen
          </ChipLink>
        </Chips>
      </div>
    </header>
  )
}