'use client';

import { useMemo } from 'react';

import CreationMap, { convertMapData } from '@/components/maps/CreationMap';

import { CreationListItem } from '@/types/Creation';

interface AggregateMapClientProps {
  creations: CreationListItem[];
}

const AggregateMapClient: React.FC<AggregateMapClientProps> = ({ creations }) => {
  const mapData = useMemo(() => {
    return convertMapData(creations, ['megjelenitendoNev', 'labelYear']);
  }, [creations]);

  return (
    <div className="w-full px-site pb-page">
      <div className="h-[72vh] min-h-[520px] w-full border border-mma-blue/10 bg-[#e8edf2] md:h-[80vh]">
        {mapData.length > 0 ? (
          <CreationMap
            className="h-full w-full"
            data={mapData}
            fitBoundsKey={`aggregate-${mapData.length}`}
          />
        ) : null}
      </div>
    </div>
  );
};

export default AggregateMapClient;