<fieldset>
  <legend>Выберите интересы</legend>

  <label>
    <input type="checkbox" name="interests" value="css">
    CSS
  </label>

  <label>
    <input type="checkbox" name="interests" value="html">
    HTML
  </label>

  <!-- ... -->
</fieldset>

const products = [
  { product: "Laptop", category: "Electronics", price: 999, brand: "Dell" },
  { product: "Mouse", category: "Electronics", price: 25, brand: "Logitech" },
  { product: "Shirt", category: "Clothing", price: 29, brand: "Nike" },
  { product: "Sneakers", category: "Footwear", price: 89, brand: "Adidas" },
  { product: "Watch", category: "Accessories", price: 299, brand: "Fossil" },
  { product: "Jacket", category: "Clothing", price: 179, brand: "Columbia" },
];

// Получить уникальные категории
const categories = [...new Set(products.map((item) => item.category))];
console.log(categories);

// ВЫВОД: [ 'Electronics', 'Clothing', 'Footwear', 'Accessories' ]

import { loadEnvFile } from 'node:process'

export function loadEnv() {
  const nodeEnv = process.env.NODE_ENV || 'development'

  // Load in order of precedence
  const files = [
    `.env.${nodeEnv}.local`,
    nodeEnv === 'test' ? null : '.env.local',
    `.env.${nodeEnv}`,
    '.env',
  ].filter((file): file is string => !!file)

  for (const file of files) {
    try {
      loadEnvFile(file)
      break // Stop after the first successful load
    } catch {}
  }
}

interface UserAPIResponse {
  user: {
    id: number;
    name: string;
    email: string;
    roles: Array<{
      name: string;
      permissions: string[];
      scope: {
        resource: string;
        actions: string[];
      };
    }>;
    metadata: {
      createdAt: string;
      lastLogin: string;
    };
  };
}

// Extract types without redefining
type User = UserAPIResponse["user"];

// Extract Nested Object
type UserMetadata = UserAPIResponse["user"]["metadata"];

// Extract Array Element Type
type Role = UserAPIResponse["user"]["roles"][number];

// Extract from Nested Array
type Permission = Role["permissions"][number];
// OR (direct access)
type Permission2 = UserAPIResponse["user"]["roles"][number]["permissions"][number];

// Extract Nested Object from Nested Array
type RoleScope = UserAPIResponse["user"]["roles"][number]["scope"];
// OR (via Role type)
type RoleScope2 = Role["scope"];

// Building a reactive store with Proxy
const createReactiveStore = (data, onChange) => {
  return new Proxy(data, {
    set(target, key, value) {
      const oldValue = target[key];
      target[key] = value;
      onChange(key, value, oldValue);
      return true;
    },
  });
};

// Usage
const state = createReactiveStore(
  { count: 0, status: 'idle', isOnline: false },
  (key, newVal, oldVal) => {
    console.log(`🔁 ${key}: ${oldVal} -> ${newVal}`);

    // You can handle business logic or UI updates here
  }
);

state.count = 5;          // 🔁 count: 0 -> 5
state.status = 'loading'; // 🔁 status: idle -> loading
state.isOnline = true;    // 🔁 isOnline: false -> true
state.status = 'error';   // 🔁 status: loading -> error
state.count++;            // 🔁 count: 5 -> 6