"use client";

import type { Result } from "./person";

interface PersonItemProps extends Result {
  remove: (uuid: string) => void;
}

const PersonItem = ({ remove, ...result }: PersonItemProps) => {
  const { email, login, location, name, picture } = result;

  return (
    <div className="card bg-base-200 w-96 shadow-sm" key={login.uuid}>
      <figure className="px-10 pt-10">
        <img src={picture.medium} alt={name.last} className="rounded-sm" />
      </figure>
      <div className="card-body items-center text-center">
        <h2 className="card-title sm:text-sm md:text-lg lg:text-xl">
          {name.first} {name.last}
        </h2>
        <h4>{email}</h4>
        <p className="sm:text-sm md:text-md lg:text-lg">
          {location.city}, {location.country}
        </p>
        <div className="card-actions">
          <button
            className="btn btn-active btn-accent btn-xs sm:btn-sm md:btn-md lg:btn-lg xl:btn-xl"
            onClick={() => remove(login.uuid)}
          >
            {" "}
            remove{" "}
          </button>
        </div>
      </div>
    </div>
  );
};

export default PersonItem;