"use client";

import { SocialMediaAccountCard } from "@/components/dashboard/social-media";
import { EmptyState } from "@/components/shared/empty-state";
import { Card } from "@/components/ui";
import { Skeleton } from "@/components/ui/skeleton";
import { useSocialMediaAccounts } from "@/hooks/use-social-media";
import { Link2 } from "lucide-react";
import { useTranslations } from "next-intl";

export function SocialMediaAccountsContainer() {
  const t = useTranslations();

  const { data, isLoading } = useSocialMediaAccounts();

  const accounts = data?.data || [];

  return (
    <div className="rounded-2xl flex flex-col overflow-hidden">
      <Card className="">
        {isLoading ? (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
            {Array.from({ length: 6 }).map((_, i) => (
              <div key={i} className="bg-card rounded-2xl border border-border p-6">
                <Skeleton className="h-12 w-12 rounded-full mb-4" />
                <Skeleton className="h-4 w-32 mb-2" />
                <Skeleton className="h-3 w-24 mb-4" />
                <div className="flex gap-4">
                  <Skeleton className="h-10 w-20" />
                  <Skeleton className="h-10 w-20" />
                </div>
              </div>
            ))}
          </div>
        ) : accounts.length === 0 ? (
          <EmptyState
            icon={Link2}
            title={t("socialMedia.noAccountsYet")}
            description={t("socialMedia.noAccountsDescription")}
            action={{
              label: t("socialMedia.linkNewAccount"),
              href: "/social-media/link-via-api",
              actionKey: "social_media.connect_account",
            }}
          />
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
            {accounts.map((account) => (
              <SocialMediaAccountCard
                key={account.id}
                account={account}
                variant="with-actions"
              />
            ))}
          </div>
        )}
      </Card>
    </div>
  );
}