import React from 'react'

// ❌ FC<Props> — adds implicit `children?: ReactNode` even if this component has no children
const Button: React.FC<{ label: string; onClick: () => void }> = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
)

// Callers can pass children silently:
<Button label="Submit" onClick={fn}>Unexpected children</Button>  // No error — but wrong

// ✅ Plain function with explicit Props interface — no implicit children
interface ButtonProps {
  label:   string
  onClick: () => void
}

function Button({ label, onClick }: ButtonProps) {
  return <button onClick={onClick}>{label}</button>
}

<Button label="Submit" onClick={fn}>Unexpected children</Button>
// ❌ Error: Type '{ children: ...; }' is not assignable to type 'ButtonProps' — correct

// ❌ Non-generic — loses type information; consumers get `any[]`
function List({ items, renderItem }: {
  items:      any[]
  renderItem: (item: any) => React.ReactNode
}) {
  return <ul>{items.map((item, i) => <li key={i}>{renderItem(item)}</li>)}</ul>
}

// ✅ Generic — type flows from `items` through to `renderItem`'s argument
function List<T>({ items, renderItem }: {
  items:      T[]
  renderItem: (item: T) => React.ReactNode
}) {
  return <ul>{items.map((item, i) => <li key={i}>{renderItem(item)}</li>)}</ul>
}

// TypeScript infers T = User from the items prop
<List
  items={users}
  renderItem={(user) => <span>{user.name}</span>}  // user: User — fully typed
/>

import { ComponentProps } from 'react'

function PrimaryButton({ className, ...rest }: ComponentProps<'button'>) {
  return <button className={`btn btn-primary ${className ?? ''}`} {...rest} />
}

// ComponentProps infers all standard button props (type, disabled, onClick, etc.)
// You never need to manually enumerate them

// For custom components:
function IconButton({
  icon,
  ...rest
}: ComponentProps<typeof Button> & { icon: React.ReactNode }) {
  return <Button {...rest}><span>{icon}</span>{rest.label}</Button>
}

// `ComponentPropsWithoutRef` — does not include the `ref` prop
function Input({ placeholder, ...rest }: ComponentPropsWithoutRef<'input'>) {
  return <input placeholder={placeholder} {...rest} />
}

// `ComponentPropsWithRef` — includes the `ref` prop for forwarding
// Usually you want forwardRef instead (see section 4)

import { forwardRef, useImperativeHandle, Ref } from 'react'

interface InputProps {
  label:       string
  placeholder?: string
}

// forwardRef<RefType, PropsType> — both type params are required
const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
  { label, placeholder },
  ref
) {
  return (
    <label>
      <span>{label}</span>
      <input ref={ref} placeholder={placeholder} />
    </label>
  )
})

// Usage — ref is HTMLInputElement, not `any`
const inputRef = useRef<HTMLInputElement>(null)
<Input ref={inputRef} label="Name" />

// After mount: inputRef.current is HTMLInputElement | null
inputRef.current?.focus()  // ✅ Safe — fully typed

// ❌ Generic `Event` loses the element type
function handleChange(e: Event) {
  // e.target is EventTarget — no `value` property
  console.log((e.target as any).value)  // Requires a cast
}

// ✅ React's typed event classes carry the element type
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
  console.log(e.target.value)  // string — no cast needed
}

function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
  e.currentTarget.disabled = true  // HTMLButtonElement — typed correctly
}

function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
  if (e.key === 'Enter') {
    e.currentTarget.blur()  // HTMLInputElement
  }
}

// Mode 1: DOM ref — stores a reference to a DOM node
// Initialize with `null`; the generic is the element type
const inputRef = useRef<HTMLInputElement>(null)
// inputRef.current: HTMLInputElement | null

// Mode 2: Mutable container — stores a mutable value that doesn't trigger re-renders
// Initialize with the value itself; the generic matches the value type
const timerRef = useRef<ReturnType<typeof setInterval>>(0)
// timerRef.current: number

// Why the distinction?
// null initializer → TypeScript infers `RefObject<T>` (readonly `.current`)
// value initializer → TypeScript infers `MutableRefObject<T>` (writable `.current`)

// State shape
interface CounterState {
  count: number
  error: string | null
}

// Discriminated union — each action carries only its relevant payload
type CounterAction =
  | { type: 'increment'; amount: number }
  | { type: 'decrement'; amount: number }
  | { type: 'reset' }
  | { type: 'setError'; message: string }

// Reducer — exhaustive switch over action.type
function counterReducer(state: CounterState, action: CounterAction): CounterState {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + action.amount, error: null }
    case 'decrement':
      return { ...state, count: Math.max(0, state.count - action.amount), error: null }
    case 'reset':
      return { count: 0, error: null }
    case 'setError':
      return { ...state, error: action.message }
    // No default needed — TypeScript verifies all cases are handled
  }
}

// Usage
const [state, dispatch] = useReducer(counterReducer, { count: 0, error: null })

dispatch({ type: 'increment', amount: 5 })  // ✅ amount: number — typed
dispatch({ type: 'reset' })                  // ✅ no payload needed
dispatch({ type: 'increment' })              // ❌ Error: Property 'amount' is missing

interface UserContextValue {
  user:   User
  logout: () => void
}

// Initialize with null — forces the type parameter to include null
const UserContext = React.createContext<UserContextValue | null>(null)

// Provider — wraps the authenticated section of the app
function UserProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User>(currentUser)
  return (
    <UserContext.Provider value={{ user, logout: () => setUser(null as any) }}>
      {children}
    </UserContext.Provider>
  )
}

// Narrowing custom hook — throws if used outside the provider
function useUser(): UserContextValue {
  const ctx = useContext(UserContext)
  if (ctx === null) throw new Error('useUser must be used within UserProvider')
  return ctx  // Narrowed to UserContextValue — null is eliminated
}

// Consumer — no optional chaining needed
function Profile() {
  const { user, logout } = useUser()
  // user: User (not User | null) — the hook guarantees non-null
  return <div>{user.name}<button onClick={logout}>Logout</button></div>
}