import { Plus, RefreshCw } from 'lucide-react';

import { Button } from '@/components/ui/button';
import type { FrameModuleViewProps } from '@/components/frame/types';

export function FrameHeader({ workflow }: FrameModuleViewProps) {
  return (
    <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
      <div>
        <h2 className="text-2xl font-bold text-white flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-400 to-violet-500 flex items-center justify-center shadow-lg shadow-amber-500/20">
            <span className="text-white font-bold text-lg">F</span>
          </div>
          F.R.A.M.E. Weekly Focus
        </h2>
        <p className="text-sm text-slate-400 mt-1">
          {workflow.canEdit ? 'Create and manage weekly campus focus areas' : 'View this week\'s campus focus and past entries'}
        </p>
      </div>
      <div className="flex items-center gap-2">
        <Button
          type="button"
          onClick={() => {
            void workflow.refresh();
          }}
          size="icon"
          className="p-2 rounded-xl bg-slate-800/60 hover:bg-slate-700/60 text-slate-400 transition-colors border border-slate-700/40"
          title="Refresh"
        >
          <RefreshCw size={16} className={workflow.isRefreshing ? 'animate-spin' : ''} />
        </Button>
        {workflow.canEdit && (
          <Button
            type="button"
            onClick={() => workflow.setShowNewForm(!workflow.showNewForm)}
            leadingIcon={<Plus size={16} />}
            className="flex items-center gap-2 px-4 py-2.5 bg-gradient-to-r from-amber-500 to-violet-500 text-white rounded-xl font-medium text-sm hover:shadow-lg hover:shadow-amber-500/20 transition-all"
          >
            New Weekly Entry
          </Button>
        )}
      </div>
    </div>
  );
}
