import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { MatchSentenceExerciseOption } from "@/interfaces/exam";
import { MdVisibilityOff } from "react-icons/md";

interface Props {
  showReference: boolean;
  selectedReference: string | null;
  options: MatchSentenceExerciseOption[];
  headings: boolean;
  setShowReference: React.Dispatch<React.SetStateAction<boolean>>;
}

const ReferenceViewer: React.FC<Props> = ({ showReference, selectedReference, options, setShowReference, headings = true}) => (
  <div
    className={`fixed inset-y-0 right-0 w-96 bg-white shadow-lg transform transition-transform duration-300 z-50 ease-in-out ${showReference ? 'translate-x-0' : 'translate-x-full'}`}
    >
    <div className="h-full flex flex-col">
      <div className="p-4 border-b bg-gray-50 flex justify-between items-center">
        <h3 className="font-semibold text-gray-800">{headings ? "Reference Paragraphs" : "Authors"}</h3>
        <button
          onClick={() => setShowReference(false)}
          className="p-2 hover:bg-gray-200 rounded-full"
        >
          <MdVisibilityOff size={20} />
        </button>
      </div>
      <div className="flex-1 overflow-y-auto p-4">
        <div className="space-y-4">
          {options.map((option) => (
            <Card key={option.id} className={`bg-gray-50 transition-all duration-200 ${selectedReference === option.id ? 'ring-2 ring-blue-500' : ''}`}>
              <CardHeader className="pb-2">
                <CardTitle className="text-md text-black">{headings ? "Paragraph" : "Author" } {option.id}</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-gray-600">{option.sentence}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </div>
  </div>
);

export default ReferenceViewer;