const users = [
  { id: 1, name: "Elizabeth", age: 28, role: "admin", active: true },
  { id: 2, name: "Jake", age: 24, role: "editor", active: false },
  { id: 3, name: "Ashley", age: 32, role: "viewer", active: true },
  { id: 4, name: "Chris", age: 19, role: "editor", active: true },
  { id: 5, name: "Tommy", age: 41, role: "admin", active: false },
  { id: 6, name: "Nina", age: 23, role: "viewer", active: true },
];
 
export default function Test003Page() {
 
    const limitToActive = users.filter(user => user.active);
    const extractNames = users.map((user) => (user.name));
    const extractAges = users.map((user) => (user.age));
    const youngerThanTwentyFive = users.filter(user => user.age < 25);
    const belowTwentyFiveAndEditor = users.filter(user => user.age < 25 && user.role === "editor");
    const extractNamesOfOverTwentyFive = users.filter(user => user.age > 25).map(user => user.name);
    const mapIntoNewObjects = users.map((user) => {
        return {
            name: user.name,
            age: user.age,
            role: user.role,
        }
    })
 
    return (
        <div className="flex flex-col gap-4">
            <h1>Test 003</h1>
            <div className="flex flex-col gap-2">
                <h2 className="font-semibold text-lg">Limit to Active</h2>
                {limitToActive.map((user) => (
                    <p key={user.name}>{user.name} is active</p>
                ))}
            </div>
            
            <div className="flex flex-col gap-2">
                <h2 className="font-semibold text-lg">Extract Names</h2>
                {extractNames.map((name) => (
                    <p key={name}>Name = {name}</p>
                ))}
            </div>
 
            <div className="flex flex-col gap-2">
                <h2 className="font-semibold text-lg">Extract Ages</h2>
                {extractAges.map((age)=> (
                    <p key={age}>Age = {age}</p>
                ))}
            </div>
 
            <div className="flex flex-col gap-2">
                <h2 className="font-semibold text-lg">Younger than 25</h2>
                {youngerThanTwentyFive.map((user) => (
                    <p key={user.id}>{user.name} is younger than 25, they are {user.age}</p>
                ))}
            </div>
 
            <div className="flex flex-col gap-2">
                <h2 className="font-semibold text-lg">Younger than 25 and is admin</h2>
                {belowTwentyFiveAndEditor.map((user) => (
                    <p key={user.id}>{user.name} is younger than 25 and is an editor</p>
                ))}
            </div>
 
            <div className="flex flex-col gap-2">
                <h2 className="font-semibold text-lg">Extract names of users over 25</h2>
                {extractNamesOfOverTwentyFive.map((name) => (
                    <p key={name}>{name} is over 25</p>
                ))}
            </div>
 
            <div className="flex flex-col gap-2">
                <h2 className="font-semibold text-lg">Map into New Objects</h2>
                {mapIntoNewObjects.map((user) => (
                    <p key={user.name}>{user.name} is {user.age} years old with the role of {user.role}</p>
                ))}
            </div>
 
        </div>
    )
}