import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

interface SharingPermissionsProps {
  spectatorPermission: string;
  linkSharingPermission: string;
  onSpectatorPermissionChange: (permission: string) => void;
  onLinkSharingPermissionChange: (permission: string) => void;
}

const permissionOptions = [
  'Admin Only',
  'Initiator Only',
  'Approver Only',
  'Initiator & Approver',
  'Admin & Initiator',
  'Admin & Approver',
  'All Roles'
];

export function SharingPermissions({
  spectatorPermission,
  linkSharingPermission,
  onSpectatorPermissionChange,
  onLinkSharingPermissionChange
}: SharingPermissionsProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div className="space-y-2">
        <Label htmlFor="spectator-permission">Spectator Addition Permission</Label>
        <Select value={spectatorPermission} onValueChange={onSpectatorPermissionChange}>
          <SelectTrigger id="spectator-permission">
            <SelectValue placeholder="Select permission" />
          </SelectTrigger>
          <SelectContent>
            {permissionOptions.map((option) => (
              <SelectItem key={option} value={option}>
                {option}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <div className="space-y-2">
        <Label htmlFor="link-sharing-permission">Link Sharing Permission</Label>
        <Select value={linkSharingPermission} onValueChange={onLinkSharingPermissionChange}>
          <SelectTrigger id="link-sharing-permission">
            <SelectValue placeholder="Select permission" />
          </SelectTrigger>
          <SelectContent>
            {permissionOptions.map((option) => (
              <SelectItem key={option} value={option}>
                {option}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}

