import React from 'react';
import { ReminderInstance } from '../../types';
import { ClockIcon, getReminderIcon } from '../icons/Icons';

interface ReminderCardProps {
  reminder: ReminderInstance;
}

const ReminderCard: React.FC<ReminderCardProps> = ({ reminder }) => {
  const timeString = reminder.scheduledTime.toLocaleTimeString([], {
    hour: '2-digit',
    minute: '2-digit',
  });
  const ReminderIcon = getReminderIcon(reminder.icon);

  return (
    <li className='shadow-md rounded-lg p-4 flex flex-col justify-between transition-all duration-300 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700'>
      <div>
        <div className='flex justify-between items-start'>
          <div className='flex items-center space-x-3'>
            <ReminderIcon className='w-7 h-7 text-sky-500 dark:text-sky-400 flex-shrink-0' />
            <div>
              <h4 className='font-bold text-lg text-slate-800 dark:text-slate-100'>
                {reminder.title}
              </h4>
            </div>
          </div>
        </div>
        <div className='flex items-center space-x-2 mt-4 font-semibold text-lg text-slate-500 dark:text-slate-400'>
          <ClockIcon className='w-5 h-5' />
          <span>{timeString}</span>
        </div>
      </div>
    </li>
  );
};

export default ReminderCard;