'use client';

import * as React from 'react';
import { Separator } from '@/components/ui/separator';
import { Card } from '@/app/real-estate/pages/card';
import { Map } from '@/app/real-estate/pages/map';

export default function RealEstatePage() {
  const [isMapExpanded, setIsMapExpanded] = React.useState(false);

  return (
    <div className="flex h-[calc(100vh-var(--header-height))]">
      {!isMapExpanded && (
        <>
          <div className="w-1/2 overflow-auto">
            <Card />
          </div>
          <Separator orientation="vertical" />
        </>
      )}
      <div className={isMapExpanded ? 'w-full' : 'w-1/2'}>
        <Map
          isExpanded={isMapExpanded}
          onToggleExpand={() => setIsMapExpanded(!isMapExpanded)}
        />
      </div>
    </div>
  );
}