import dayjs from "npm:dayjs";
import RelativeTime from "npm:dayjs/plugin/relativeTime.js";

dayjs.extend(RelativeTime);

export const UserListSchema = {
  users: { $ref: "user", multiple: true, required: true }
};

export type ExtractedUserListSchema = {
  users: { name: string, surname: string, created_at: Date }[]
}

export const UserList = ({ users }: ExtractedUserListSchema) => {
  return (
    <ul class="list bg-base-100 rounded-box shadow-md">

      <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Users</li>

      { users.map(user => (
        <li class="list-row">
          <div><img class="size-10 rounded-box" src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"/></div>
          <div>
            <div>{user.name} {user.surname}</div>
            <div class="text-xs uppercase font-semibold opacity-60">Created { dayjs(user.created_at).fromNow() }</div>
          </div>
          <button type="button" class="btn btn-square btn-ghost">
            <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
          </button>
          <button type="button" class="btn btn-square btn-ghost">
            <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
          </button>
        </li>
      ))}
    </ul>
  );
};