import React from "react";

import { Paragraph, Text } from "components/Typography";
import { Pill } from "components/Pill";

import { SmartLinkSearchResult } from "../SmartLinkModal";

interface SmartLinkSearchEntryProps {
  result: SmartLinkSearchResult;
  suffixIcon?: React.ReactNode;
}

export const SmartLinkSearchEntry: React.FC<SmartLinkSearchEntryProps> = ({
  result,
  suffixIcon = null,
}) => (
  <div className="smart-link--search-result">
    <img className="smart-link--search-artwork" src={result.imageUrl} />

    <div className="smart-link--search-metadata">
      <Text className="smart-link--search-title">{result.name}</Text>

      <Pill className="smart-link--search-pill" text={result.type} />

      <Paragraph className="smart-link--search-subtitle">
        {result.artistNames.join(", ")}
      </Paragraph>
    </div>

    {suffixIcon}
  </div>
);
