import { useMemo } from 'react';
import type { FeatureFilters } from '../../types';
import {
  buildPropertySearchUrls,
  H3_RADIUS_MILES,
  type HexagonLocation,
} from '../../lib/external-search';

export default function ExternalSearchLinks({
  location,
  filters,
}: {
  location: HexagonLocation;
  filters: FeatureFilters;
}) {
  const urls = useMemo(() => buildPropertySearchUrls(location, filters), [location, filters]);
  const radiusMiles = H3_RADIUS_MILES[location.resolution] ?? 1;
  const label = `${radiusMiles}mi radius`;

  return (
    <div className="p-3 border-b border-warm-200 dark:border-navy-700">
      <h3 className="text-xs font-semibold text-warm-500 dark:text-warm-400 uppercase tracking-wider mb-2">
        Search {label} on
      </h3>
      <div className="flex gap-2">
        <a
          href={urls.rightmove}
          target="_blank"
          rel="noopener noreferrer"
          className="flex-1 text-center text-xs py-1.5 px-2 rounded border border-warm-200 dark:border-warm-700 bg-white dark:bg-warm-800 text-teal-600 dark:text-teal-400 hover:bg-warm-50 dark:hover:bg-warm-700 font-medium"
        >
          Rightmove
        </a>
        <a
          href={urls.onthemarket}
          target="_blank"
          rel="noopener noreferrer"
          className="flex-1 text-center text-xs py-1.5 px-2 rounded border border-warm-200 dark:border-warm-700 bg-white dark:bg-warm-800 text-teal-600 dark:text-teal-400 hover:bg-warm-50 dark:hover:bg-warm-700 font-medium"
        >
          OnTheMarket
        </a>
        <a
          href={urls.zoopla}
          target="_blank"
          rel="noopener noreferrer"
          className="flex-1 text-center text-xs py-1.5 px-2 rounded border border-warm-200 dark:border-warm-700 bg-white dark:bg-warm-800 text-teal-600 dark:text-teal-400 hover:bg-warm-50 dark:hover:bg-warm-700 font-medium"
        >
          Zoopla
        </a>
      </div>
    </div>
  );
}