'use client';
import React, { useState } from 'react';
import { useRouter } from 'next/navigation';

const Sales = () => {
  const [selectedSite, setSelectedSite] = useState('');
  const sites = ['Site A', 'Site B', 'Site C'];
  const router = useRouter();

  const handleGoToDashboard = () => {
  if (selectedSite) {
    router.push(`/adminDashboard?site=${encodeURIComponent(selectedSite)}`);
  }
};

  return (
    <div className="min-h-screen flex flex-col items-center justify-center p-4 bg-gray-50">
      <h1 className="text-3xl font-bold mb-4 text-gray-800">
        Welcome to Rooftop Dashboard!
      </h1>
      <h2 className="text-2xl font-bold mb-4 text-gray-800">
        Select a site to get started.
      </h2>
      <div className="w-full max-w-sm">
        <label className="block text-gray-700 mb-2">Select Site:</label>
        <select
          value={selectedSite}
          onChange={(e) => setSelectedSite(e.target.value)}
          className="w-full p-2 border-2 border-yellow-300 rounded-md"
        >
          <option value="" disabled>
            -- Choose a site --
          </option>
          {sites.map((site) => (
            <option key={site} value={site}>
              {site}
            </option>
          ))}
        </select>

        {selectedSite && (
          <div className="flex flex-col space-y-2">
            <p className="mt-4 text-green-700">You selected: {selectedSite}</p>
            <button
              onClick={handleGoToDashboard}
              className="btn-primary"
            >
              Go to Dashboard
            </button>
          </div>
        )}
      </div>
    </div>
  );
};

export default Sales;


