import React from 'react';
import { HistoricalLandmark, Page } from '@/types.ts';
import { Card, CardContent } from '@/components/ui/Card.tsx';
import { History } from 'lucide-react';
import Button from '@/components/ui/Button.tsx';

interface HistoricalContextCardProps {
  landmark: HistoricalLandmark;
  onNavigate: (page: Page) => void;
}

const HistoricalContextCard = ({ landmark, onNavigate }: HistoricalContextCardProps) => {
  return (
    <Card className="bg-warning/10 border-warning/20">
      <CardContent className="p-6 text-center">
        <div className="h-12 w-12 mx-auto rounded-full flex items-center justify-center bg-warning/20 text-warning-foreground mb-3">
          <History className="h-4 h-6 text-current w-4 w-6" />
        </div>
        <h3 className="text-base font-semibold text-warning-foreground">
          {t('heritage.historicalContext')}
        </h3>
        <p className="text-sm text-warning-foreground/80 mt-1">
          {t('heritage.buildingDescription', { name: landmark.name, period: landmark.period })}
        </p>
        <Button
          variant="ghost"
          size="sm"
          className="mt-3 text-warning-foreground hover:text-warning-foreground hover:bg-warning/20"
          onClick={() => onNavigate('map')}
        >
          {t('heritage.viewOnMap')}
        </Button>
      </CardContent>
    </Card>
  );
};

export default React.memo(HistoricalContextCard);