// JavaScript with superpowers TypeScript Type-Safe JavaScript · Compile-Time Errors · Better Code

// ── Basic Types ──────────────────────────────────
let name:    string  = "Abel Tesfaye";
let age:     number  = 25;
let active:  boolean = true;
let skills:  string[] = ["HTML", "CSS", "React"];
let scores:  number[] = [95, 87, 92];

// ── Union Type — ሁለት አይነት ────────────────────────
let id: string | number = "abc123";
id = 42;  // ✅ number ደግሞ OK ነው

// ── Function Types ──────────────────────────────
function greet(name: string): string {
  return `ሰላም! ${name}`;
}

function add(a: number, b: number): number {
  return a + b;
}

function logMsg(msg: string): void {
  console.log(msg); // void = ምንም አይመልስም
}

// ── Optional Parameter ──────────────────────────
function hello(name: string, age?: number): string {
  return age ? `${name}, ${age}` : name;
}
hello("Abel");     // ✅ age ሳይኖር OK
hello("Abel", 25); // ✅ age ኖሮ OK

// ── Interface ──────────────────────────────────
interface User {
  id:      number;
  name:    string;
  email:   string;
  age?:    number;       // ? = optional
  role:    'admin' | 'user'; // literal union
}

// ✅ ትክክል — fields ሁሉ አሉ
const user: User = {
  id: 1, name: "Abel",
  email: "abel@ethiocode.com",
  role: "admin"
};

// ❌ Error — email ጠፍቷል!
// const bad: User = { id:2, name:"Sara" };

// ── Interface Extending ────────────────────────
interface Admin extends User {
  permissions: string[];  // User + extra fields
}

// ── Type Alias ─────────────────────────────────
type Point = { x: number; y: number };
type Status = 'pending' | 'active' | 'done';

type ApiResponse<T> = {  // Generic!
  success: boolean;
  data:    T;
  error?:  string;
};

// ── Function with Interface ─────────────────────
function createUser(data: User): User {
  return { ...data };
}

// React ውስጥ Props Interface:
interface ButtonProps {
  label:    string;
  onClick:  () => void;
  disabled?: boolean;
  variant?: 'primary' | 'secondary';
}

import React, { useState } from 'react';

// ── Props Interface ────────────────────────────
interface CounterProps {
  initial:  number;
  step?:    number;      // optional, default 1
  label:    string;
  onCount?: (count: number) => void;
}

// ── Typed Component ────────────────────────────
function Counter({ initial, step = 1, label, onCount }: CounterProps) {

  // useState typing — number ብቻ!
  const [count, setCount] = useState<number>(initial);

  function increment(): void {
    const next = count + step;
    setCount(next);
    onCount?.(next); // Optional chaining
  }

  return (
    <div>
      <h3>{label}: {count}</h3>
      <button onClick={increment}>+{step}</button>
    </div>
  );
}

// ── Usage ──────────────────────────────────────
<Counter
  initial={0}
  step={5}
  label="EthioCode Score"
  onCount={(n) => console.log(`Score: ${n}`)}
/>

// ❌ Error — initial ሳይሰጥ:
// <Counter label="Test" />
// TS: Property 'initial' is missing!