'use client';

import { Text } from '@/components/ui/text';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import CommonImage from '@/components/common/CommonImage';

interface DataStatsProps {
  total: number;
  active?: number | string;
}

const DataStats = ({ total, active = '-' }: DataStatsProps) => {
  return (
    <Text className="table-bottom-left">
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Text className="table-info">
            <CommonImage
              src="/main/Info.png"
              width={12}
              height={12}
              alt="Info icon"
              classname="info-icon"
            />
          </Text>
        </DropdownMenuTrigger>
        <DropdownMenuContent className="p-4 w-40 ml-3">
          <Text className="mb-2" weight="semibold">
            <CommonImage
              src="/main/total-record.png"
              width={22}
              height={22}
              alt="total-record"
              classname="total-record inline mr-1"
            />{' '}
            Total : {Math.ceil(total)}
          </Text>
          <Text weight="semibold">
            <CommonImage
              src="/main/active-user.png"
              width={22}
              height={22}
              alt="active-user"
              classname="active-user inline mr-1"
            />{' '}
            Active : {active}
          </Text>
        </DropdownMenuContent>
      </DropdownMenu>
    </Text>
  );
};

export default DataStats;