"use client"
import React from "react"
import { useIsSticky } from "../../hooks"
import { classNames } from "../../utils"
import { SpaceBetween, SpaceBetweenProps } from "../SpaceBetween"
import { Text, TextBodyProps } from "../Text"

export type ListHeaderProps = SpaceBetweenProps

const ListHeaderBase = ({ className, ...rest }: ListHeaderProps) => {
  const { ref, isSticky } = useIsSticky()
  return (
    <SpaceBetween
      className={classNames(
        "sticky -top-px border-b border-border-2 bg-inherit p-4",
        isSticky && "shadow-sm",
        className,
      )}
      ref={ref}
      {...rest}
    />
  )
}

export const ListHeaderTitle = ({
  size = "xs",
  weight = "semibold",
  ...rest
}: TextBodyProps) => {
  return <Text color="text-secondary" size={size} weight={weight} {...rest} />
}

export const ListHeader = Object.assign(ListHeaderBase, {
  Title: ListHeaderTitle,
})