import React from "react";
import ReactDOM from "react-dom";

interface ProfileProps {
  readonly name: string;
  readonly username: string;
  readonly location: string;
  readonly website: string;
}

const Profile: React.FC<ProfileProps> = ({
  name,
  username,
  location,
  website,
}) => (
  <ul>
    <li>
      Name: <strong>{name}</strong>
    </li>
    <li>
      username: <strong>{username}</strong>
    </li>
    <li>
      Location: <strong>{location}</strong>
    </li>
    <li>
      Website: <strong>{webiste}</strong>
    </li>
  </ul>
);

ReactDOM.render(
  <Profile
    name="Andrés Castellanos"
    username="andrescv"
    location="Guatemala 🇬🇹"
    website="https://andrescv.dev"
  />,
  document.getElementById("root")
);