import "hono/jsx"
import { FC, PropsWithChildren } from "hono/jsx"

type DividerProps = PropsWithChildren & {
  class?: string
}

export const Divider: FC<DividerProps> = ({ children, class: className }) => {
  return (
    <div class={`flex items-center my-4 ${className || ""}`}>
      <div class="flex-1 border-t border-gray-300"></div>
      {children && (
        <>
          <span class="px-3 text-sm text-gray-500 bg-white">{children}</span>
          <div class="flex-1 border-t border-gray-300"></div>
        </>
      )}
    </div>
  )
}

export const Test = () => {
  return (
    <div class="p-4 space-y-8 max-w-md">
      <h2 class="text-lg font-bold mb-4">Divider Examples</h2>

      <div>
        <p>Would you like to continue</p>
        <Divider>OR WOULD YOU LIKE TO</Divider>
        <p>Submit to certain dealth</p>
      </div>

      {/* Just a line */}
      <div>
        <p>Look a line 👇</p>
        <Divider />
        <p>So cool, so straight!</p>
      </div>
    </div>
  )
}
