import { Icon } from "@/components/icons";
import { LandingShell } from "@/components/landing/shell";
import type { LandingProps } from "@/components/landing/types";
import {
  getSocialNetwork,
  socialHandleLabel,
} from "@/lib/qr/social-networks";
import { socialDataSchema } from "@/lib/qr/types/social";

export function SocialLanding({ data }: LandingProps) {
  const { title, description, profiles } = socialDataSchema.parse(data);

  return (
    <LandingShell title={title} subtitle={description || null}>
      <ul className="space-y-3">
        {profiles.map((profile) => {
          const network = getSocialNetwork(profile.network);
          return (
            <li key={profile.network}>
              <a
                href={profile.url}
                rel="noopener noreferrer"
                className="flex items-center gap-3.5 rounded-2xl border border-slate-200 bg-surface px-4 py-3.5 text-slate-900 shadow-sm transition-colors hover:border-slate-300 hover:bg-slate-50"
              >
                <span
                  aria-hidden="true"
                  className="flex size-10 shrink-0 items-center justify-center rounded-full text-sm font-semibold text-white"
                  style={{ backgroundColor: network?.color ?? "#475569" }}
                >
                  {network?.monogram ?? "?"}
                </span>
                <span className="min-w-0 flex-1">
                  <span className="block font-medium">
                    {network?.label ?? profile.network}
                  </span>
                  <span className="block truncate text-sm text-slate-500">
                    {socialHandleLabel(profile.url)}
                  </span>
                </span>
                <Icon
                  name="external"
                  className="size-4 shrink-0 text-slate-400"
                  aria-hidden="true"
                />
              </a>
            </li>
          );
        })}
      </ul>
    </LandingShell>
  );
}