import { memo } from 'react';
import { useTranslation } from 'react-i18next';

import { type DisplayPreferenceMemory } from '@/database/repositories/userMemory';
import GridCard from '@/routes/(main)/memory/features/GridView/GridCard';
import ProgressIcon from '@/routes/(main)/memory/features/ProgressIcon';

import PreferenceDropdown from '../../PreferenceDropdown';

interface PreferenceCardProps {
  onClick?: () => void;
  preference: DisplayPreferenceMemory;
}

const PreferenceCard = memo<PreferenceCardProps>(({ preference, onClick }) => {
  const { t } = useTranslation('memory');

  return (
    <GridCard
      actions={<PreferenceDropdown id={preference.id} />}
      capturedAt={preference.capturedAt || preference.updatedAt || preference.createdAt}
      cate={preference.type}
      title={preference.title}
      badges={
        <ProgressIcon
          format={(percent) => `${t('filter.sort.scorePriority')}: ${percent}%`}
          percent={(preference.scorePriority ?? 0) * 100}
        />
      }
      onClick={onClick}
    >
      {preference.conclusionDirectives}
    </GridCard>
  );
});

export default PreferenceCard;
