Dashboard

import { ShareDashboard, InvitedUser } from '@/components/ui/dashboard-2'; // Adjust path as needed

// --- MOCK DATA FOR DEMONSTRATION ---
const mockUsers: InvitedUser[] = [
  {
    id: 'user-1',
    name: 'Jack',
    email: 'jack@untitledui.com',
    avatarUrl: 'https://images.unsplash.com/photo-1586297135537-94bc9ba060aa?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fHByb2ZpbGV8ZW58MHwyfDB8fHww&auto=format&fit=crop&q=60&w=900',
    status: 'sent',
  },
  {
    id: 'user-2',
    name: 'Sienna',
    email: 'sienna@untitledui.com',
    avatarUrl: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cHJvZmlsZXxlbnwwfDJ8MHx8fDA%3D&auto=format&fit=crop&q=60&w=900',
    status: 'sent',
  },
  {
    id: 'user-3',
    name: 'Frankie',
    email: 'frankie@untitledui.com',
    avatarUrl: 'https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZmlsZXxlbnwwfDJ8MHx8fDA%3D&auto=format&fit=crop&q=60&w=900',
    status: 'sent',
  },
  {
    id: 'user-4',
    name: 'Matt',
    email: 'matt@untitledui.com',
    avatarUrl: 'https://plus.unsplash.com/premium_photo-1723579457404-bf5e6571d177?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDV8fHByb2ZpbGV8ZW58MHwyfDB8fHww&auto=format&fit=crop&q=60&w=900',
    status: 'sent',
  },
  {
    id: 'user-5',
    name: 'Amélie Laurent',
    email: 'amelie@untitledui.com',
    // Using an external placeholder image service
    avatarUrl: 'https://i.pravatar.cc/150?u=amelie',
    status: 'accepted',
  },
];

const teamSeatsData = {
  used: 6,
  total: 10,
};

// --- DEMO COMPONENT ---
export default function ShareDashboardDemo() {
  // Placeholder functions to show how props would be used in a real application
  const handleInvite = (email: string) => {
    alert(`✅ Invitation sent to: ${email}\n(In a real app, you'd call your API here.)`);
  };

  const handleCopy = () => {
    navigator.clipboard.writeText('sales.untitledui.com');
    alert('📋 Dashboard URL copied to clipboard!');
  };

  const handleManage = () => {
    alert('⚙️ Navigating to team management page...');
  };
  
  const handleAddDomain = () => {
    alert('🔗 Opening custom domain settings...');
  };

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-4 md:p-8">
      <ShareDashboard
        dashboardUrl="sales.untitledui.com"
        qrCodeSrc="https://ik.imagekit.io/fpxbgsota/Untitled.png?updatedAt=1759082788907"
        invitedUsers={mockUsers}
        teamSeats={teamSeatsData}
        onInviteUser={handleInvite}
        onCopyUrl={handleCopy}
        onManageTeam={handleManage}
        onAddCustomDomain={handleAddDomain}
      />
    </div>
  );
}