import { Button } from "@/components/ui/button";
import { faLocationArrow, faSignal } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

type HeaderTextProps = {
  dict: Dictionary;
};

const Text = ({ value }) => (
  <p className="text-xs font-bold text-neutral-800">{value}</p>
);

const Status = () => (
  <Button
    className="hover:bg-stone-200 hover:text-black"
    decorator={faSignal}
    isIcon
  />
);

const User = ({ dict }: HeaderTextProps) => (
  <Text value={dict.pages.users.table.header.user} />
);

const Email = ({ dict }: HeaderTextProps) => (
  <Text value={dict.pages.users.table.header.email} />
);

const CreatedAt = ({ dict }: HeaderTextProps) => (
  <Text value={dict.pages.users.table.header.created_at} />
);

const UpdatedAt = ({ dict }: HeaderTextProps) => (
  <Text value={dict.pages.users.table.header.updated_at} />
);

const Actions = () => {
  return (
    <div className="mx-auto text-center">
      <FontAwesomeIcon icon={faLocationArrow} />
    </div>
  );
};

export { Actions, CreatedAt, Email, Status, UpdatedAt, User };