'use client';
import { useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react';
import AccountCampaignsListview from 'views/dashboard/AccountCampaignsListview';
import Card from '@mui/material/Card';

type Props = {
  params: {
    id: string;
  };
};

const AccountCampaignsPage = ({ params }: Props) => {
  const searchParams = useSearchParams();
  const { id } = params;
  const [client, setClient] = useState<any | null>(null);
  const [profile, setProfile] = useState<any | null>(null);

  useEffect(() => {
    if (searchParams) {
      setClient(searchParams.get('client'));
      setProfile(searchParams.get('profile'));
    }
  }, [searchParams]);

  return (
    <div className="page">
      <h1>Campaigns</h1>
      <Card variant="outlined" style={{ paddingLeft: '20px', marginBottom: '20px' }}>
        <p>
          <b>Client</b>
          <span> - {client}</span>
        </p>
        <p>
          <b>Profile</b>
          <span> - {profile}</span>
        </p>
      </Card>
      <AccountCampaignsListview accountId={id} />
    </div>
  );
};

export default AccountCampaignsPage;