"use client";

import * as React from "react";
import Link from "next/link";
import { ChevronLeft, UserPlus } from "lucide-react";
import { Button } from "@/components/ui/button";

export function ForbiddenView() {
  return (
    <div className="flex flex-col items-center justify-center min-h-[60vh] p-8 text-center gap-3">
      <h1 className="text-[20px] font-extrabold font-['Lexend'] text-text">
        You don&apos;t have permission to bulk-assign leads
      </h1>
      <p className="text-[13px] text-gray-500 font-['Lexend_Deca'] max-w-md">
        Ask an administrator to grant you the
        <code className="mx-1 rounded bg-gray-100 px-1.5 py-0.5 text-[12px]">
          UPDATE / BULK_ASSIGN_LEAD
        </code>
        catalog permission.
      </p>
      <Link href="/leads">
        <Button size="sm" variant="outline" className="gap-1.5">
          <ChevronLeft size={13} /> Back to Leads
        </Button>
      </Link>
    </div>
  );
}

export function EmptyState() {
  return (
    <div className="flex flex-col items-center justify-center min-h-[60vh] p-8 text-center gap-3">
      <div className="size-12 rounded-2xl bg-accent/10 flex items-center justify-center">
        <UserPlus size={20} className="text-accent" />
      </div>
      <h1 className="text-[20px] font-extrabold font-['Lexend'] text-text">
        No leads selected
      </h1>
      <p className="text-[13px] text-gray-500 font-['Lexend_Deca'] max-w-md">
        Go back to the Leads list, check the rows you want to assign, then
        click <strong>Bulk Assign</strong>.
      </p>
      <Link href="/leads">
        <Button size="sm" className="gap-1.5">
          <ChevronLeft size={13} /> Go to Leads
        </Button>
      </Link>
    </div>
  );
}