import { List } from "flowbite-react";
import { FC } from "react";
import { twMerge } from "tailwind-merge";
import { TSclientSchema } from "../forms/schema/client";
type Props = {
  client: TSclientSchema;
};

const ClientNameInfo: FC<Props> = ({ client }) => {
  const status_color = client?.status === 0 ? "text-red-600" : "";
  return (
    <>
      <div className="flex items-center">
        <div className={twMerge("mr-2 h-2.5 w-2.5 rounded-full")} />
        <List>
          <List.Item
            className={`!mb-2 block dark:text-gray-400 font-semibold ${status_color}`}
          >
            {client?.pppoe_username}
          </List.Item>
          <List.Item
            className={`!mb-2 block dark:text-gray-400 font-medium line-clamp-1 text-gray-700 ${status_color}`}
          >
            {client?.name}
          </List.Item>
          <List.Item
            className={`!mb-2 block font-normal dark:text-gray-400 text-gray-500 ${status_color}`}
          >
            {client?.phone}
          </List.Item>
        </List>
      </div>
    </>
  );
};

export default ClientNameInfo;