"use client"
 
import { useCookieStorage } from "@/hooks/use-cookie-storage"
 
interface UserPreferences {
  theme: "light" | "dark"
  fontSize: number
}
 
export function Component() {
  const [username, setUsername] = useCookieStorage("username", "guest", {
    path: "/",
    expires: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 7 days
    sameSite: "Lax",
  })
 
  const [preferences, setPreferences] = useCookieStorage<UserPreferences>(
    "preferences",
    { theme: "light", fontSize: 16 },
    { path: "/", secure: true }
  )
 
  return (
    <div>
      <div>
        <h2>Username</h2>
        <input value={username} onChange={(e) => setUsername(e.target.value)} />
      </div>
 
      <div>
        <h2>Preferences</h2>
        <select
          value={preferences.theme}
          onChange={(e) =>
            setPreferences((prev) => ({
              ...prev,
              theme: e.target.value as "light" | "dark",
            }))
          }
        >
          <option value="light">Light</option>
          <option value="dark">Dark</option>
        </select>
 
        <input
          type="number"
          value={preferences.fontSize}
          onChange={(e) =>
            setPreferences((prev) => ({
              ...prev,
              fontSize: Number(e.target.value),
            }))
          }
        />
      </div>
    </div>
  )
}

export function CounterExample() {
  const [counter, setCounter] = useCookieStorage("counter", 0, {
    path: "/",
    expires: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // Expires in 7 days
  })
 
  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={() => setCounter((c) => c + 1)}>Increment</button>
    </div>
  )
}

interface UserPreferences {
  theme: "light" | "dark"
  fontSize: number
}
 
export function PreferencesExample() {
  const [preferences, setPreferences] = useCookieStorage<UserPreferences>(
    "preferences",
    { theme: "light", fontSize: 16 }
  )
 
  return (
    <div>
      <label>
        Theme:
        <select
          value={preferences.theme}
          onChange={(e) =>
            setPreferences((prev) => ({
              ...prev,
              theme: e.target.value as "light" | "dark",
            }))
          }
        >
          <option value="light">Light</option>
          <option value="dark">Dark</option>
        </select>
      </label>
 
      <label>
        Font Size:
        <input
          type="number"
          value={preferences.fontSize}
          onChange={(e) =>
            setPreferences((prev) => ({
              ...prev,
              fontSize: Number(e.target.value),
            }))
          }
        />
      </label>
    </div>
  )
}