import dayjs from "dayjs";
import Actions from "./_actions";
import Status from "./_status";

type CellProps = {
  row: UserData;
};

const Date = ({ date }) => (
  <div>
    <p className="whitespace-nowrap">
      {dayjs(date).format("ddd, MMM DD, YYYY")}
    </p>
  </div>
);

const User = ({ row }: CellProps) => (
  <div>{row.name && <p className="capitalize">{row.name}</p>}</div>
);

const Email = ({ row }: CellProps) => (
  <div>
    <p>{row.email}</p>
  </div>
);

const CreatedAt = ({ row }: CellProps) => <Date date={row.created_at} />;

const UpdatedAt = ({ row }: CellProps) => <Date date={row.updated_at} />;

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