import React from 'react';
import type { MessageBlock } from '@/store/commStore';
import { ChevronRight } from 'lucide-react';

interface ContactCardBlockProps {
  block: MessageBlock;
}

const ContactCardBlock: React.FC<ContactCardBlockProps> = ({ block }) => {
  const { contact_id, name } = block.block_data;

  const contactName: string = name || 'Unbekannter Kontakt';
  const contactId: string = contact_id || '';
  const linkHref = contactId ? `/contacts/${contactId}` : '#';

  // Generate initials for avatar placeholder
  const initials = contactName
    .split(' ')
    .map((part) => part.charAt(0).toUpperCase())
    .slice(0, 2)
    .join('');

  return (
    <a
      href={linkHref}
      className="flex items-center gap-3 p-3 rounded-lg border border-secondary-200 bg-white shadow-sm hover:shadow-md hover:border-primary-300 transition-all"
    >
      <div className="flex-shrink-0 w-10 h-10 rounded-full bg-primary-100 text-primary-700 flex items-center justify-center text-sm font-semibold">
        {initials || '?'}
      </div>
      <div className="flex-1 min-w-0">
        <p className="text-sm font-medium text-secondary-700 truncate">{contactName}</p>
        <p className="text-xs text-secondary-400">Kontakt anzeigen</p>
      </div>
      <ChevronRight className="w-4 h-4 text-secondary-400 flex-shrink-0" aria-hidden="true" strokeWidth={2} />
    </a>
  );
};

export default ContactCardBlock;