import Link from "next/link";
import { Users } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

import type { AdminDashboardRecentCustomer } from "../_lib/admin-dashboard-types";
import { RecentCustomersTable } from "./recent-customers-table/table";

type SubscriberOverviewProps = {
  totalCustomers: number;
  recentCustomers: AdminDashboardRecentCustomer[];
};

export function SubscriberOverview({ totalCustomers, recentCustomers }: SubscriberOverviewProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="leading-none">
          {new Intl.NumberFormat("en-US").format(totalCustomers)} Customers
        </CardTitle>
        <CardDescription>Recent customer records with status, account type, and join date.</CardDescription>
        <CardAction>
          <Button variant="outline" size="sm" asChild>
            <Link href="/dashboard/customers">
              <Users />
              View all
            </Link>
          </Button>
        </CardAction>
      </CardHeader>

      <CardContent className="pt-0">
        <RecentCustomersTable data={recentCustomers} />
      </CardContent>
    </Card>
  );
}