Recursos para Desenvolvedores

import { useEffect, useState } from 'react'

export function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value)

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)

    return () => clearTimeout(handler)
  }, [value, delay])

  return debouncedValue
}

export function formatDate(
  date: Date | string,
  locale = 'pt-BR'
): string {
  const d = typeof date === 'string' ? new Date(date) : date

  return new Intl.DateTimeFormat(locale, {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric'
  }).format(d)
}

export function formatRelative(date: Date | string): string {
  const d = typeof date === 'string' ? new Date(date) : date
  const now = new Date()
  const diff = now.getTime() - d.getTime()
  const minutes = Math.floor(diff / 60000)
  const hours = Math.floor(diff / 3600000)
  const days = Math.floor(diff / 86400000)

  if (minutes < 1) return 'now'
  if (minutes < 60) return `${minutes}min ago`
  if (hours < 24) return `${hours}h ago`
  if (days < 7) return `${days}d ago`
  return formatDate(d)
}

import { useCallback, useState } from 'react'

export function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue)

  const toggle = useCallback(() => setValue(v => !v), [])
  const setTrue = useCallback(() => setValue(true), [])
  const setFalse = useCallback(() => setValue(false), [])

  return { value, toggle, setTrue, setFalse } as const
}

import {
  createContext,
  useContext,
  type ReactNode
} from 'react'

export function createSafeContext<T>(displayName: string) {
  const Context = createContext<T | null>(null)
  Context.displayName = displayName

  function useContextValue(): T {
    const value = useContext(Context)
    if (value === null) {
      throw new Error(
        `use${displayName} must be used within ${displayName}Provider`
      )
    }
    return value
  }

  function Provider({
    value,
    children,
  }: {
    value: T
    children: ReactNode
  }) {
    return (
      <Context.Provider value={value}>
        {children}
      </Context.Provider>
    )
  }

  return [Provider, useContextValue] as const
}

import { useEffect, useState } from 'react'

export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false)

  useEffect(() => {
    const media = window.matchMedia(query)
    setMatches(media.matches)

    function handleChange(e: MediaQueryListEvent) {
      setMatches(e.matches)
    }

    media.addEventListener('change', handleChange)
    return () => media.removeEventListener('change', handleChange)
  }, [query])

  return matches
}

export const breakpoints = {
  sm: '(min-width: 640px)',
  md: '(min-width: 768px)',
  lg: '(min-width: 1024px)',
  xl: '(min-width: 1280px)',
  dark: '(prefers-color-scheme: dark)',
  reducedMotion: '(prefers-reduced-motion: reduce)',
} as const

import { useCallback, useRef } from 'react'

export function useEventCallback<
  Args extends unknown[],
  Return
>(fn: (...args: Args) => Return): (...args: Args) => Return {
  const ref = useRef(fn)
  ref.current = fn

  return useCallback(
    (...args: Args) => ref.current(...args),
    []
  )
}

import { z, type ZodType } from 'zod'

type FetchOptions = RequestInit & {
  params?: Record<string, string>
}

export async function typedFetch<T>(
  url: string,
  schema: ZodType<T>,
  options: FetchOptions = {}
): Promise<T> {
  const { params, ...fetchOptions } = options

  const queryString = params
    ? '?' + new URLSearchParams(params).toString()
    : ''

  const response = await fetch(`${url}${queryString}`, {
    headers: {
      'Content-Type': 'application/json',
      ...fetchOptions.headers,
    },
    ...fetchOptions,
  })

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}: ${response.statusText}`)
  }

  const data = await response.json()
  const parsed = schema.safeParse(data)

  if (!parsed.success) {
    console.error('API validation failed:', parsed.error.issues)
    throw new Error(
      `Invalid API response: ${parsed.error.issues.map(i => i.message).join(', ')}`
    )
  }

  return parsed.data
}

type ButtonProps = {
  children: React.ReactNode
  className?: string
} & (
  | {
      variant: 'solid' | 'outline' | 'ghost'
      onClick: () => void
      loading?: boolean
      disabled?: boolean
      href?: never
    }
  | {
      variant: 'link'
      href: string
      onClick?: never
      loading?: never
      disabled?: never
    }
)

export function Button(props: ButtonProps) {
  if (props.variant === 'link') {
    return (
      <a href={props.href} className={props.className}>
        {props.children}
      </a>
    )
  }

  return (
    <button
      onClick={props.onClick}
      disabled={props.disabled || props.loading}
      className={props.className}
    >
      {props.loading ? <Spinner /> : props.children}
    </button>
  )
}

function assertNever(value: never): never {
  throw new Error(`Unhandled value: ${value}`)
}

type PaymentStatus =
  | 'pending'
  | 'processing'
  | 'completed'
  | 'failed'
  | 'refunded'

function getStatusConfig(status: PaymentStatus) {
  switch (status) {
    case 'pending':
      return { label: 'Pending', color: 'yellow', icon: Clock }
    case 'processing':
      return { label: 'Processing', color: 'blue', icon: Loader }
    case 'completed':
      return { label: 'Completed', color: 'green', icon: Check }
    case 'failed':
      return { label: 'Failed', color: 'red', icon: X }
    case 'refunded':
      return { label: 'Refunded', color: 'gray', icon: Undo }
    default:
      return assertNever(status)
  }
}