import { Edit3 } from 'lucide-react';

import type { FrameEntryViewModel } from '@/business/frame/types';
import { FRAME_SECTION_LABELS } from '@/shared/constants/frame';
import { Button } from '@/components/ui/button';

interface FrameEntryDetailsProps {
  readonly entry: FrameEntryViewModel;
  readonly canEdit: boolean;
  readonly startEditing: (entry: FrameEntryViewModel) => void;
}

export function FrameEntryDetails({ entry, canEdit, startEditing }: FrameEntryDetailsProps) {
  return (
    <>
      {FRAME_SECTION_LABELS.map((section) => (
        <div key={section.key} className={`${section.lightBg} border rounded-xl p-4`}>
          <div className="flex items-center gap-2 mb-1.5">
            <span className={`w-7 h-7 bg-gradient-to-br ${section.color} rounded-lg text-white text-sm font-bold flex items-center justify-center shadow-lg`}>
              {section.letter}
            </span>
            <span className="text-sm font-semibold text-slate-200">{section.label}</span>
          </div>
          <p className="text-sm text-slate-300 leading-relaxed pl-9">{entry[section.key]}</p>
        </div>
      ))}
      {canEdit && (
        <Button
          type="button"
          onClick={() => startEditing(entry)}
          leadingIcon={<Edit3 size={14} />}
          className="flex items-center gap-2 px-4 py-2 bg-violet-500/15 text-violet-400 rounded-xl text-sm font-medium hover:bg-violet-500/25 transition-colors border border-violet-500/20"
        >
          Edit Entry
        </Button>
      )}
    </>
  );
}
