// App.jsx

import { useState } from "react";
import { AgeCalculator }
    from "./components/AgeCalculator"
import { AgeResult }
    from "./components/AgeResult"
import {
    differenceInDays,
    differenceInHours,
    differenceInMinutes,
    differenceInMonths,
    differenceInSeconds,
    differenceInWeeks,
    differenceInYears
}
    from "date-fns";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
    const [age, setAge] = useState(null);

    const calculateAge = (date) => {
        const today = new Date();
        const dateObject = new Date(date);
        const ageYears = differenceInYears(today, dateObject);
        const ageMonths = differenceInMonths(today, dateObject);
        const ageDays = differenceInDays(today, dateObject);
        const ageWeeks = differenceInWeeks(today, dateObject);
        const ageHours = differenceInHours(today, dateObject);
        const ageMinutes = differenceInMinutes(today, dateObject);
        const ageSeconds = differenceInSeconds(today, dateObject);
        setAge({
            years: ageYears,
            months: ageMonths,
            days: ageDays,
            weeks: ageWeeks,
            hours: ageHours,
            minutes: ageMinutes,
            seconds: ageSeconds,
        });
    };

    return (
        <center className="container my-3">
            <h1>Age Calculator</h1>
            <strong>This free age calculator
                computes age in terms of years,
                months, weeks, days, hours,
                minutes, and seconds,
                given a date of birth.
            </strong>
            <div className="my-3">
                <AgeCalculator calculateAge={calculateAge} />
            </div>
            {age && <AgeResult age={age} />}
        </center>
    )
}

export default App;

// AgeCalculator.jsx

import { useState } from "react"
import PropTypes from 'prop-types';

export const AgeCalculator = ({ calculateAge }) => {
    const [date, setDate] = useState('');
    console.log(date);

    const handleChangeDate = (val) => {
        setDate(val.target.value);
    };
    const handleSubmit = (val) => {
        val.preventDefault();
        calculateAge(date);
    };

    return (
        <form onSubmit={handleSubmit}>
            <div className="col-auto">
                <input value={date} type="date"
                    className="mb-3"
                    onChange={handleChangeDate} />
            </div>
            <div className="col-auto">
                <button disabled={!date}
                    type="submit"
                    className="btn btn-primary mb-3">
                    calculate Age
                </button>
            </div>
        </form>
    )
};
AgeCalculator.propTypes = {
    calculateAge: PropTypes.func.isRequired,
}

// AgeResult.jsx

import PropTypes from 'prop-types';
export const AgeResult = ({ age }) => {
    return <>
        <h5>You are age is {age.years} Years</h5>
        <h5>Or {age.months} Months</h5>
        <h5>Or {age.weeks} Weeks</h5>
        <h5>Or {age.days} Days</h5>
        <h5>Or {age.hours} Hours</h5>
        <h5>Or {age.minutes} Minutes</h5>
        <h5>Or {age.seconds} Seconds</h5>
    </>
};

AgeResult.prototypes = {
    age: PropTypes.shape({
        years: PropTypes.number.isRequired,
        months: PropTypes.number.isRequired,
        weeks: PropTypes.number.isRequired,
        days: PropTypes.number.isRequired,
        hours: PropTypes.number.isRequired,
        minutes: PropTypes.number.isRequired,
        seconds: PropTypes.number.isRequired,
    }),
};