import { forwardRef } from 'react';
import PropTypes from 'prop-types';
import useCandidateMetadata from "../../../hooks/election/useCandidateMetadata/index.js";
import Headshot from "../Headshot/index.js";

/**
 * The headshot for a candidate
 */
const CandidateHeadshot = forwardRef((props, ref) => {
  const {
    id,
    ...forwardProps
  } = props;
  const metadata = useCandidateMetadata(id);
  const url = metadata?.headshot;
  if (!url) return null;
  return <Headshot ref={ref} src={url} alt={`Headshot of ${metadata?.fullName}`} {...forwardProps} />;
});
CandidateHeadshot.displayName = 'CandidateHeadshot';
CandidateHeadshot.propTypes = {
  /**
   * The ID of the candidate whose name you want to format.
   */
  id: PropTypes.string.isRequired
};
export default CandidateHeadshot;